额,出去玩了几天很累。可是文章还是要更新的,不然百度就不喜欢我了...
今天来水一篇“导航栏下拉至一定高度后固定在顶部的特效”,也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码:
<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阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 2天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 3天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 4vue3项目引入vant报错的错误原因和解决办法03-12
- 5天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 6zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 7天兴工作室2023双11活动:五折优惠券大放送11-05
- 8腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 9新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 标签聚合
- ×1列表页×1堆栈跟踪×1立体主题×1zblog主题怎么修改×2wordpress文章总数×1一天×1operateWXDataForAd×1AppID×1网格×1zblog后台版权×1zblog侧栏操作×2zblog笑话模板×1禁止右键×1原油交易模板×1Swiper鼠标拖拽×1GetCommentByID×1垃圾流量×7下拉导航×1男人×9zblogphp1.5
最新评论
-
天兴工作室
07-05可以看下更新记录,上个月29日才更新的 -
访客
07-05现在这个主题还更新吗 -
天兴工作室
06-15打开编辑文字,选中代码语言,然后不管是回车断行还是复制粘贴,都不会被分为一行一框啊,所以没理解你是咋办到的 -
访客
06-14zblog文章中发多行代码,被分成一行一个框,一行一个框,如何调整成和你的一样的一段代码在一个框中 -
天兴工作室
06-13这个功能本来就有
有 20 位网友评论:
wjy329 6年前 (2019-06-04) 回复
亲测可用,感谢博主。
天兴工作室网友 6年前 (2018-09-23) 回复
大神想请问下页面滚动时怎么改变背景颜色
天兴工作室 6年前 (2018-09-23) 回复
文章里面有css代码吧,在里面加个颜色就行了,不会就百度w3c
天兴工作室网友 6年前 (2018-08-04) 回复
.fixednav在jsp页面的哪里设置属性
天兴工作室网友 6年前 (2018-06-27) 回复
太好了真的
天兴工作室网友 7年前 (2018-04-30) 回复
不行啊,,html没有反应
谢小案 7年前 (2018-01-25) 回复
厉害死了,超好用[写的很给力!]
菜鸟 7年前 (2018-01-06) 回复
js用不了,效果体现不出来
菜鸟 7年前 (2018-01-06) 回复
就是js用没有效果一样
哈哈哥 7年前 (2018-01-03) 回复
不能用啊 楼主
程序斌 7年前 (2017-12-13) 回复
那底部固定的那种怎么弄呢?滚动高度改怎么写?是不是页面高度减去底部div的高度再减去滚动条的高度,但是滚动条高度怎么算?
小蘐 7年前 (2017-12-05) 回复
那个因为没看到html,所以不知道navTmp类家加在哪个元素上可以解释一下吗