Question

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

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

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

我已经对texte进行了一些布局定制，但我的老板希望菜单栏始终可见。在模板中，条形图会出现，您开始向下滚动并始终隐藏在主页上。通过更改脚本的If条件，我已设法使其显示并在第一次滚动后保持打开状态。

// MENU出现并隐藏 $（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)'
        });

    }
});

}）;

即使更改条件，如果它仍然需要至少一个滚动显示。

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

在加载时显示引导菜单

2 个答案:

选项1（JS）：

选项2（CSS）：

使用媒体查询