使引导菜单在加载时可见

Question

我对 Boostrap 了解不多，我尝试在网上找到答案，但没有成功。

我正在根据以下模板为我工作的小公司建立一个网站：

https://dcrazed.com/bent-app-landing-page-template/

我已经自定义了一些布局，但我的老板希望菜单栏始终可见。在模板中，当您开始向下滚动并始终隐藏在主页上时，该栏将出现。通过更改脚本的 If 条件，我设法让它出现并在第一次滚动后保持不变。

//菜单出现和隐藏 $(document).ready(function() {

"use strict";

$(window).scroll(function() {

    "use strict";

    if ($(window).scrollTop() > 1000) {
        $(".navbar").css({
            'margin-top': '0px',
            'opacity': '1'
        })
        $(".navbar-nav>li>a").css({
            'padding-top': '15px'
        });
        $(".navbar-brand img").css({
            'height': '35px'
        });
        $(".navbar-brand img").css({
            'padding-top': '0px'
        });
        $(".navbar-default").css({
            'background-color': 'rgba(59, 59, 59, 0.7)'
        });
    } else {
        $(".navbar").css({
            'margin-top': '0px',
            'opacity': '1'
        })
        $(".navbar-nav>li>a").css({
            'padding-top': '15px'
        });
        $(".navbar-brand img").css({
            'height': '35px'
        });
        $(".navbar-brand img").css({
            'padding-top': '0px'
        });
        $(".navbar-default").css({
            'background-color': 'rgba(59, 59, 59, 0.7)'
        });

    }
});

});

即使改变了 If 的条件，它仍然需要至少一个卷轴才能出现。

Answer 1

如果您添加trigger('scroll')，您应该可以立即看到它。

$(window).scroll(function(){  
  // some code
}).trigger('scroll')

Answer 2

选项 1 (JS)：

如果你仍然想使用 js，你可以将你的逻辑/方法包装成一个类似 resizeHandler 的函数，然后在页面加载时调用它 resizeHandler();

或@a.barbieri 说使用.trigger('scroll')

$(document).ready(function() {
  "use strict";

  //scroll handler
  $(window).scroll(resizeHandler);
  //init
  resizeHandler();

  function resizeHandler(){
   if ($(window).scrollTop() > 1000) {
      $(".navbar").css({
        'margin-top': '0px',
        'opacity': '1'
      })
      $(".navbar-nav>li>a").css({
        'padding-top': '15px'
      });
      $(".navbar-brand img").css({
        'height': '35px'
      });
      $(".navbar-brand img").css({
        'padding-top': '0px'
      });
      $(".navbar-default").css({
        'background-color': 'rgba(59, 59, 59, 0.7)'
      });
    } else {
      $(".navbar").css({
        'margin-top': '0px',
        'opacity': '1'
      })
      $(".navbar-nav>li>a").css({
        'padding-top': '15px'
      });
      $(".navbar-brand img").css({
        'height': '35px'
      });
      $(".navbar-brand img").css({
        'padding-top': '0px'
      });
      $(".navbar-default").css({
        'background-color': 'rgba(59, 59, 59, 0.7)'
      });
    }
  }

});

选项 2 (CSS)：

使用媒体查询来确定要显示和隐藏的屏幕尺寸。

使用媒体查询

媒体查询由可选的媒体类型和零个或多个表达式组成，这些表达式通过使用媒体特性（例如宽度、高度和颜色）来限制样式表的范围。 CSS3 中添加的媒体查询让内容的呈现方式可以针对特定范围的输出设备进行定制，而无需更改内容本身。

参考号：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries