摘要:滚动条下滑一定高度时,固定指定的导航条。固定对象距离顶部高度为去掉前面的双斜杠,然后在页面中刷新并向下滚动,页面就弹出的高度。效果示例效果戳我。当前做法已经不建议,建议使用最新效果新地址
滚动条下滑一定高度时,固定指定 ID 的导航条。
使用方法:
1、修改 FixTop() 中 id 为需要固定导航的相应 id ;
2、修改 FixTop() 中 offsettop 为需要固定对象导航距离顶部的距离;
效果:
当滚动条下滑滚动超过导航栏位置时,导航栏固定 (移除原有,添加「position:fixed」属性并添加 「fixtop」 类);
当滚动条上滑高度低于原来导航高度时,导航栏变成默认效果(移除原有,添加「position:static」属性并添加 「fixnone」类)。
function FixTop(obj,offsettop){ var obj = document.getElementById(obj); var objOffset = obj.offsetTop; // alert("固定对象距离顶部高度为" + objOffset); //去掉 alert 前面的双斜杠,然后在页面中刷新并向下滚动,页面就弹出 offsettop 的高度。 var bodyScrollOffset = document.body.scrollTop; var Result = objOffset - bodyScrollOffset; sessionStorage.objoffset = objOffset; // console.log(Result); if (Result < 0) { if (bodyScrollOffset < offsettop) { obj.style.position = "static"; obj.setAttribute("class", "fixnone"); }else{ obj.style.position = "fixed"; obj.style.top = 0; obj.setAttribute("class", "fixtop"); } }else{ obj.style.position = "static"; obj.setAttribute("class", "fixnone"); } } window.onscroll = function(){ FixTop("id",offsettop); }
效果示例:效果戳我。
当前做法已经不建议,建议使用最新效果:新地址文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83403.html
摘要:滚动条下滑一定高度时,固定指定的导航条。使用方法修改中为需要固定导航的相应效果当滚动条下滑滚动超过导航栏位置时,导航栏固定移除原有,添加属性并添加类名当滚动条上滑高度低于原来导航高度时,导航栏变成默认效果移除原有,添加属性并添加类名。 滚动条下滑一定高度时,固定指定 ID 的导航条。 使用方法:1、修改 FixTop() 中 id 为需要固定导航的相应 id ; 效果: 当滚动条下滑...
摘要:移动端活动页面常常需要能够分享到各种社交中,常用的有微信等。微信二维码问题同一个页面里要是有两个二维码,长按扫描总是只能扫出左侧第一个二维码。 首发于简书博客:http://www.jianshu.com/p/e958... 2017-11-25 更新:5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶...
摘要:移动端活动页面常常需要能够分享到各种社交中,常用的有微信等。微信二维码问题同一个页面里要是有两个二维码,长按扫描总是只能扫出左侧第一个二维码。 首发于简书博客:http://www.jianshu.com/p/e958... 2017-11-25 更新:5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶...
阅读 2559·2023-04-25 20:50
阅读 3902·2023-04-25 18:45
阅读 2189·2021-11-17 17:00
阅读 3299·2021-10-08 10:05
阅读 3046·2019-08-30 15:55
阅读 3473·2019-08-30 15:44
阅读 2337·2019-08-29 13:51
阅读 1087·2019-08-29 12:47