关于Brooklyn主题，菜单栏悬浮，可以试试用js设置。

Cenith · 发表于 2018-11-16 13:53:31

本帖最后由 Cenith 于 2019-2-7 16:54 编辑

关于Brooklyn主题，菜单栏悬浮，可以试试用js设置。
设置 1 即可悬浮，2 和 3 不是必须。

1. 悬浮设置，打开Assets>theme.js.liquid，最下方，增加代码：
$(document).ready(function(){
var top = $('.site-header').offset().top;
$(document).scroll(function(){
var scrTop = $(window).scrollTop();
if(scrTop >= top){
$('.site-header').css({'position':'fixed','top':'0','width':'100%'});
}else{
$('.site-header').css({'position':'','top':''});
}
})
})

2. 菜单栏背景色设置，打开Sections>header.liquid，在</style>上方增加代码（代码默认黑色，可自行修改颜色代码）：
.site-header {
  background: black;
}

3. 可根据喜好给悬浮菜单增加个动画效果，Assets>theme.js.liquid，最下方，增加代码：
$(document).ready(function(){
$(window).on("scroll",function(){
      if($(this).scrollTop() > 190){
         $(".site-header").addClass("fixed");
         if(!isAnimated){
            $(".site-header").css("top","-40px");
            $(".site-header").animate({"top":"0px"},1000);
            isAnimated = true;
         }
      }else{
         isAnimated = false;
         $(".site-header").removeClass("fixed");
      }
})
});