html距离顶部距离 javascript改变position值实现菜单滚动至顶部后固定?
浏览量:1618
时间:2021-03-11 03:37:57
作者:admin
javascript改变position值实现菜单滚动至顶部后固定?
Code:·$(function(){·//获取要定位的元素与浏览器顶部的距离。·var navh=$(“)。导航“)。偏移()。顶部·//滚动条事件·$(窗口)。Scroll(function(){·//获取滚动条的滑动距离。·var scroh=$(这个)。Scrolltop()·//如果滚动条的滑动距离大于或等于定位元素与浏览器顶部之间的距离,则滚动条的滑动距离是固定的;否则滚动条的滑动距离不是固定的。如果(scroh>=navh){·$(”。导航“)。CSS({“position”:“fixed”,“top”:0})·}else If(scroh<navh){·$()。导航“)。CSS({“position”:“static”})·}·}·}
判断浏览器的滚动高度和要固定在文档顶部的元素与文档顶部之间的距离,然后收听滚动事件得到滚动高度,判断滚动高度和元素与顶部之间的距离,如果它们相等,就固定元素。那很好。写代码太麻烦了,原则是这样的,你试试看。另外,要避免元素固定定位,因为突然固定,不考虑页面高度会跳转的问题。在固定位置的同时,可以将margin top或padding top添加到以下元素,该元素等于固定位置元素的高度。再说一句。个人感觉。网站特效就是用JS来控制CSS,从而得到一些仅仅用CSS无法达到的效果。因此,面对类似的效果,你可以试着想一想自己的想法,写出来,然后根据想法找到需要了解的知识点,然后效果就会慢慢出来
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。