实现随着滚动条滚动，导航会自动切换的效果

fjcgreat 发布于2019-08-22 14:56 / 3224人阅读

摘要：通过监听的滚动事件，通过滚动高度来判断那个内容区在当前视口，从而操作对应的导航菜单里的状态的转换。

实现导航栏跟随滚动，点击导航页面滚动到相应指定位置？
第一次写博客，还望指正不足：wo..菜鸟+1
简单的思路是：
导航菜单里，通过给元素指定 data-socrll-id 属性，来影射内容区里对应的元素。
如 data-socrll-id="page-a" 对应内容区的元素

。
然后根据筛查所有 data-sorcll-id 的的元素，然后根据这些元素找到对应的内容区。
通过监听 window的滚动事件，通过滚动高度来判断那个内容区在当前视口，从而操作对应的导航菜单里的状态的转换。点击导航菜单触发滚动，与此相对应。
简单的代码思路实现：
不知道是不是算自己的一个jquey 插件（jq菜鸟）
优化性能：

增加节流函数

缓存 $()元素对象

未完成可以直接把内容元素信息筛选一遍放到数组里，减少对dom对象的访问

Title

a b c d

demo测试地址

GPU云服务器云服务器导航跟随滚动条滚动条html实现 js滚动条到最后数据自动加载 html的滚动条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93010.html

实现随着滚动条滚动，导航会自动切换的效果

摘要：通过监听的滚动事件，通过滚动高度来判断那个内容区在当前视口，从而操作对应的导航菜单里的状态的转换。实现导航栏跟随滚动，点击导航页面滚动到相应指定位置？第一次写博客，还望指正不足：wo..菜鸟+1简单的思路是：导航菜单里，通过给元素指定 data-socrll-id 属性，来影射内容区里对应的元素。如 data-socrll-id=page-a 对应内容区的元素。然后...

Winer 2019-08-01 18:39 评论0 收藏0
踩坑日记(持续更新...)

摘要：二按照官方的提示解决了意思就是切到分支，自己的分支解决冲突，提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。 2018/3/2 1,vue的{{}}怎么失效了项目使用了twig模板渲染语法{{}}冲突，使用v-text v-html渲染可以写表达式的写法字符+变量 2，函数防抖节流封装实用的下拉加载更多代码demo...

taoszu 2019-08-22 15:00 评论0 收藏0
【译】无限滚动加载最佳实践

摘要：优秀无限滚动的五项原则将无限滚动做好，并不是不可能完成的任务。提供为特定项添加书签的可能无限滚动最常见的缺点之一就是，内容出现的时候，没法添加书签。结论无限滚动实现得好的话，可以达到令人难以置信的光滑无缝体验。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...

Sunxb 2019-08-19 18:37 评论0 收藏0
水平居中布局与滚动条跳动的千年难题

摘要：于是，问题来了，信息流页面，如新浪微博，是从上往下渲染的。，结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~例如，妇女之友大淘宝的首页： .warp{ width:1190px; margin:0 auto; position:relativ...

songjz 2019-07-01 10:20 评论0 收藏0