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

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

您应该在this w3schools website上找到该解决方案。您不需要引导程序。您只能使用CSS和javascript来做到这一点。

Answer 5

这个答案会奏效由于滚动条的方式向下，它将隐藏，如果向上滚动条将显示不是一点

＆＃13;

GetNativeMediaType

＆＃13;

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

＆＃13;

如何使用在滚动后显示的引导程序创建隐藏的导航栏？

5 个答案: