कैसे छिपाना/दिखाना नेविगेशन बार उपयोगकर्ता द्वारा ऊपर स्क्रॉल/नीचे

Question

छिपाएँ/दिखाएँ नेविगेशन बार उपयोगकर्ता द्वारा ऊपर स्क्रॉल/नीचे

यहाँ उदाहरण मैं प्राप्त करने के लिए कोशिश कर रहा हूँ है: http://haraldurthorleifsson.com/ या http://www.teehanlax.com/story/readability/

जब आप स्क्रॉल करते हैं तो स्क्रॉल करते समय नेविगेशन बार स्क्रीन को बंद कर देता है और स्क्रीन पर स्क्रीन पर वापस स्लाइड करता है। मैंने यह पता लगाया है कि इसे फीका/फीका करने के साथ कैसे किया जाए, लेकिन उदाहरण के तौर पर मैं इसे उसी एनीमेशन के साथ प्राप्त करना चाहता हूं। नोट: मैं पहले से ही SlideIn (कोशिश की) और जिस तरह से है कि यह खींच एनीमेशन है ... की तरह

jQuery:

var previousScroll = 0, 
headerOrgOffset = $('#header').offset().top; 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').fadeOut(); 
     } else { 
      $('#header').fadeIn(); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

सीएसएस:

#header { 
    width: 100%; 
    z-index: 100; 
} 

.fixed { 
    position: fixed; 
    top: 0; 
} 

#header-wrap { 
    position: relative; 
} 

एचटीएमएल:

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav> 
      <h1>Prototype</h1> 
     </nav> 
    </div> 
</div> 

Answer 1

क्या आपने एनिमेट करने का प्रयास किया है? लेकिन navbar की ऊंचाई के साथ -60px को प्रतिस्थापित करें। लेकिन नकारात्मक।

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').animate({ 
       top: '-60px'  //Change to Height of navbar 
      }, 250);    //Mess with animate time 
     } else { 
      $('#header').animate({ 
       top: '0px' 
      },250); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 2

उत्तरोत्तर छुपाई जा रही के बजाय ऊपर की ओर स्लाइड करने के लिए एनएवी के भीतरी सामग्री पाने के लिए आपको पेरेंट तत्व पर एनीमेशन करते हैं, और इसलिए की तरह माता-पिता के तल पर भीतरी तत्व रखने के लिए, की जरूरत है:

jsfiddle

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav><h1>Prototype</h1>another line<br/>another line 
     </nav> 
    </div> 
</div> 

सीएसएस

body { 
    height: 1000px; 
} 

#header { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
} 

#header-wrap { 
    width: 100%; 
    position: fixed; 
    background-color: #e0e0e0; 
} 

js

var previousScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
     } else { 
      $('#header-wrap').slideDown(); 
     } 
    } else { 
      $('#header-wrap').slideDown(); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 3

जो भी navbar तत्व आप उपयोग करते हैं, यह उस पर एक transition: transform 0.3s, और की transform 0.

#navbar { 
    position: fixed; 
    right: 0; left: 0; top: 0; 
    /* your height */ 
    height: 40px; 
    /* .... */ 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform .3s; 
    -moz-transition: -moz-transform .3s; 
    -o-transition: transform .3s; 
    transition: transform .3s; 
} 
#navbar.scrolled { 
    /* subtract your height */ 
    -webkit-transform: translate3d(0,-40px,0); 
    -moz-transform: translate3d(0,-40px,0); 
    transform: translate3d(0,-40px,0); 
} 

फिर अपने जावास्क्रिप्ट उपयोगकर्ता के स्क्रॉल देखने के लिए की जरूरत है एक आधार शामिल करने के लिए है:

;(function(){ 
    var previousScroll = 0; 
    var navbar = document.getElementById('navbar'), 
     navClasses = navbar.classList; // classList doesn't work <IE10 

    window.addEventListener('scroll', function(e){ 
     var currentScroll = window.scrollY; 
     var isDown = currentScroll > previousScroll; 

     if (isDown && !navClasses.contains('scrolled')){ 
      // scrolling down, didn't add class yet 
      navClasses.add('scrolled'); // we hide the navbar 
     } else if (!isDown){ 
      // scrolling up 
      navClasses.remove('scrolled'); // won't error if no class found 
     } 

     // always update position 
     previousScroll = currentScroll; 
    }); 
}()); //run this anonymous function immediately 

Answer 4

हेडरूम जेएस आज़माएं।

इसके अलावा आप सीएसएस कक्षाओं को संपादित कर सकते हैं और संक्रमण प्रभाव को तैनात कर सकते हैं।

http://wicky.nillia.ms/headroom.js