查看: 236|回复: 4

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

[复制链接]

1

主题

3

帖子

57

积分

注册会员

Rank: 2

积分
57
发表于 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");
        }
    })
});


回复

使用道具 举报

0

主题

6

帖子

16

积分

新手上路

Rank: 1

积分
16
发表于 2018-11-27 11:20:14 | 显示全部楼层
谢谢Cenith大神的分享!
回复 支持 反对

使用道具 举报

0

主题

2

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2019-1-20 21:24:09 | 显示全部楼层
按照代码加了,但是preview发现页面排版乱了,顶部菜单栏变成了白色的条状。请问要怎么修改调整?求解
回复 支持 反对

使用道具 举报

1

主题

3

帖子

57

积分

注册会员

Rank: 2

积分
57
 楼主| 发表于 2019-2-3 18:41:20 | 显示全部楼层
zoecheung 发表于 2019-1-20 21:24
按照代码加了,但是preview发现页面排版乱了,顶部菜单栏变成了白色的条状。请问要怎么修改调整?求解 ...

分步骤添加测试,看哪一步出问题的。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门推荐

怎么删除review的多与代码
怎么删除review的多与代码
我的产品下面多出了一个评论区怎么删除求大神告诉下 两个插件的怎么删除
Shopify建站运营推广相关问题征集
Shopify建站运营推广相关
承蒙各位Shopify卖家朋友们的支持和厚爱,在运营WaimaoB2C.com博客和WaimaoB2C.cn论坛
购物按钮下的 购物安全保证图片 怎么添加
购物按钮下的 购物安全保
购物按钮下的 购物安全保证图片 怎么添加
shopify退款政策在哪里啊
shopify退款政策在哪里啊
我的shopify里checkout中怎么没有退款政策这项啊,求大神指点
怎么用图片作为颜色选项
怎么用图片作为颜色选项
有谁知道这个颜色选项用图片选择的是怎么做的,就想淘宝一样的,应该有具体的app,但
客服邮箱和订单测试
客服邮箱和订单测试
老板注册了个新的shopify网站给我弄,,,,产品的价格要设置成用户购买我们的样品才能看
如何重新排版产品信息页面?
如何重新排版产品信息页面
我在用EMPIRE这个主题,左侧是图片展示,右侧是选额变体跟假如购物车,以及文字DESCRI

Archiver|手机版|小黑屋|

  • Copyright   ©2015-2016  Shopify论坛 | WaimaoB2C.cn   Powered by©Discuz!   
快速回复 返回顶部 返回列表