额,出去玩了几天很累。可是文章还是要更新的,不然百度就不喜欢我了...
今天来水一篇“导航栏下拉至一定高度后固定在顶部的特效”,也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码:
<script type="text/javascript"> $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象。 win.scroll(function(){ if(sc.scrollTop()>=100){ nav.addClass("fixednav"); }else{ nav.removeClass("fixednav"); } }) }) </script>
将这个js放到要实现效果的页面里面去,然后我们要修改的是第三行的.nav,“nav“改成你自己页面导航栏的class;第七行的”100“为下拉到100个像素的时候触发特效,可以自行修改至合适的高度。
然后在css文件里面增加这个属性:
.fixednav { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; }
这样就差不多完成了。
大概讲下这个js的意思,判断下拉到一定高度的时候,给导航栏的div插入一个”fixednav“属性,然后给”fixednav“加上固定在顶部的参数。
嗯,大家请自行折腾,有什么不懂的欢迎在本文下面评论区留言,请勿直接加我QQ问.....
相关推荐
- zblog导航栏管理设置的几种方法03-11
- 终于...zblog导航栏管理插件出来了!11-02
- 一个非常简单简洁的自适应导航栏10-25
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1当前栏目文章×1百度贴吧×1网格×1url静态化×1卢松松主题php版×1霉气×1装修网站×2腾讯云618×5双11×2zblog调用×12016年春节×1模板下载×1zblogphp1.3×2视频主题×1清明节×1剑侠三×1后台函数×1网站设置×1邮箱设置×2搜索框
最新评论
-
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求 -
访客
01-16点击分类,能不能下面显示所有分类的名字。 -
天兴工作室
01-13多条件筛选很麻烦,主题不考虑加,有需求可以联系我定制
有 20 位网友评论:
wjy329 5年前 (2019-06-04) 回复
亲测可用,感谢博主。
天兴工作室网友 6年前 (2018-09-23) 回复
大神想请问下页面滚动时怎么改变背景颜色
天兴工作室 6年前 (2018-09-23) 回复
文章里面有css代码吧,在里面加个颜色就行了,不会就百度w3c
天兴工作室网友 6年前 (2018-08-04) 回复
.fixednav在jsp页面的哪里设置属性
天兴工作室网友 6年前 (2018-06-27) 回复
太好了真的
天兴工作室网友 6年前 (2018-04-30) 回复
不行啊,,html没有反应
谢小案 6年前 (2018-01-25) 回复
厉害死了,超好用[写的很给力!]
菜鸟 6年前 (2018-01-06) 回复
js用不了,效果体现不出来
菜鸟 6年前 (2018-01-06) 回复
就是js用没有效果一样
哈哈哥 6年前 (2018-01-03) 回复
不能用啊 楼主
程序斌 6年前 (2017-12-13) 回复
那底部固定的那种怎么弄呢?滚动高度改怎么写?是不是页面高度减去底部div的高度再减去滚动条的高度,但是滚动条高度怎么算?
小蘐 6年前 (2017-12-05) 回复
那个因为没看到html,所以不知道navTmp类家加在哪个元素上可以解释一下吗