बूटस्ट्रैप के साथ एक छिपी हुई नेविबार कैसे बनाएं जो स्क्रॉल करने के बाद दिखाता है?

Question

क्या आप मुझे बता सकते हैं कि मैं बूटस्ट्रैप के साथ कैसे बना सकता हूं जो एक छिपी हुई है और केवल पृष्ठ को स्क्रॉल करना शुरू करने के बाद ही दिखाता है? http://jsfiddle.net/panchroma/nwV2r/

यह सबसे तत्वों पर काम करना चाहिए, बस navbars नहीं:

Answer 1

यहाँ एक विभेद है जहां नेवबार में fades और आप नियंत्रित कर सकते हैं कितनी दूर उन स्क्रॉल करने की आवश्यकता से पहले नेवबार प्रकट होता है।

अपने मानक HTML

जे एस

(function ($) { 
    $(document).ready(function(){ 

    // hide .navbar first 
    $(".navbar").hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function() { 

       // set distance user needs to scroll before we start fadeIn 
      if ($(this).scrollTop() > 100) { 
       $('.navbar').fadeIn(); 
      } else { 
       $('.navbar').fadeOut(); 
      } 
     }); 
    }); 

}); 
    }(jQuery)); 

Answer 2

का प्रयोग करें इस साइट देखें: https://redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/

<script src="https://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 
(function($) {   
    $(document).ready(function(){      
     $(window).scroll(function(){       
      if ($(this).scrollTop() > 200) { 
       $('#menu').fadeIn(500); 
      } else { 
       $('#menu').fadeOut(500); 
      } 
     }); 
    }); 
})(jQuery); 
</script> 

Answer 3

यह कैश्ड तत्व और गतिशील स्क्रॉल मूल्य के साथ संस्करण सुधार हुआ है।

$(document).ready(function(){ 
    var $nav = $('.nav');//Caching element 
    // hide .navbar first - you can also do this in css .nav{display:none;} 
    $nav.hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before we start fadeIn 
      if ($(this).scrollTop() > 100) { //For dynamic effect use $nav.height() instead of '100' 
       $nav.fadeIn(); 
      } else { 
       $nav.fadeOut(); 
      } 
     }); 
    }); 

}); 

Answer 4

इस उत्तर क्योंकि स्क्रॉलबार रास्ते से काम करेंगे नीचे जाने के लिए छिपा दिया जाएगा और अगर स्क्रॉलबार ऊपर यह नहीं एक बिंदु में दिखाई देंगे

//The variable takes the value of the new position each time 
 
var scrollp=0; 
 
    (function ($) { 
 
     $(document).ready(function(){ 
 
      $(function() { 
 
       $(window).scroll(function() { 
 
       // ask about the position of scroll 
 

 
        if ($(this).scrollTop() < scrollp) { 
 
         $('.navbar').fadeIn(); 
 
         scrollp= $(this).scrollTop(); 
 
        } else { 
 
         $('.navbar').fadeOut(); 
 
         scrollp= $(this).scrollTop(); 
 
        } 
 
       }); 
 
      }); 
 

 
     }); 
 
    }(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>