twitter-bootstrap – 如何创建一个隐藏的导航栏与引导,显示您滚

发布时间：2020-12-18 00:26:04 所属栏目：安全来源：网络整理

导读：你能告诉我如何用引导创建一个隐藏的导航栏,只有在开始滚动页面后才能显示？解决方法这是一个变体,导航栏会淡出,您可以控制用户在导航栏出现之前需要滚动的距离： http://jsfiddle.net/panchroma/nwV2r/ 它应该适用于大多数元素,而不仅仅是导航条. 使用您

你能告诉我如何用引导创建一个隐藏的导航栏,只有在开始滚动页面后才能显示？

解决方法

这是一个变体,导航栏会淡出,您可以控制用户在导航栏出现之前需要滚动的距离： http://jsfiddle.net/panchroma/nwV2r/

它应该适用于大多数元素,而不仅仅是导航条.

使用您的标准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));

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!