网站制作之jquery页面滚动菜单栏定位跟随 - 杏耀注册
800-2300-9385
网站建设资讯详细

网站制作之jquery页面滚动菜单栏定位跟随

发表日期:2019-06-27 09:01:47   作者来源:杏耀注册   浏览:4101   标签:网站制作    
在一些前端页面中有一种效果是随着页面的下滑到不同的区域,悬浮的菜单栏随着页面滑动到不同区域定位菜单栏里不同的分类,而点击悬浮菜单栏里的分类页面会跳至到相对应的区域如下图:

制作截图1

html代码图如下:

HTML代码

css部分悬浮导航栏需要绝对定位(position:fixed),其他的就没什么需要特别说明了。
js如图:
 
js代码图如下
如图所示,获取悬浮菜单栏距离顶部的距离,再获取当前滚动条距离顶部的距离,用if判断滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定(static),反之就不固定(fixed)。获取悬浮导航栏子目录的个数,然后为页面添加页面滚动监听事件,用循环分别获取不同区域距离顶部的距离,用if判断比较当小于等于悬浮导航栏距离顶部的距离时,对应的悬浮导航栏分类添加类名on,其余的分类有类名on的删除类名。
 
 

如没特殊注明,文章均为杏耀注册原创,转载请注明来自http://www.cdpcwl.com/news/5111.html