twitter-bootstrap - 如何使用滚动后显示的 Bootstrap 创建隐藏导航栏？

Question

您能告诉我如何使用 Bootstrap 创建一个隐藏的导航栏，并且仅在您开始滚动页面后才显示？

Answer 1

这是导航栏淡入的变体，您可以控制用户在导航栏出现之前需要滚动多远:http://jsfiddle.net/panchroma/nwV2r/

它应该适用于大多数元素，而不仅仅是导航栏。

使用您的标准 HTML

JS

(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));