jQuery仿京东楼层滑动侧边栏高亮(原创)

所属分类:UI-滚动

 37863  408  查看评论 (19)
分享到微信朋友圈
X
jQuery仿京东楼层滑动侧边栏高亮(原创) ie兼容9

更新时间:2017/9/30 下午2:48:37

更新说明:

1,添加了查看评论按钮来改变对应区的高度

2,将floorList和navList作为匿名函数作用域的变量,不用在需要的函数再传递

3,将data数组放到滚动监听和点击事件的位置,防止楼层高度变动导致的位置变化未更新导致的bug

注意:本次更新就是为了解决楼层高度改变导致data中的位置不准确的bug(已解决)

scrollFloor({
    floorClass : '.scroll-floor',  //楼层盒子class;默认为'.scroll-floor'
    navClass : '.scroll-nav',     //导航盒子class;默认为'.scroll-nav'
    activeClass : 'active',      //导航高亮class;默认为'active'
    delayTime:100,            //点击导航,滚动条滑动到该位置的时间间隔;默认为200
    activeTop:200,            //楼层到窗口的某个位置时,导航高亮(设置该位置);默认为100
    scrollTop:0              //点击导航,楼层滑动到窗口的某位置;默认为100
});
相关插件-滚动

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 48869  454

简洁的jQuery滚动条插件scrollBar.js

本插件会将容器中滚动条样式进行统一,通过修改css任意改变滚动条的宽度与颜色,实现自定义滚动条的目的。
  滚动
 61941  383

jQuery滚动楼层效果

jQuery滚动楼层效果,通俗简单好上手,js中有详细步骤解析。
  滚动
 37882  417

滚动条

可定制的滚动条,通过js+css实现
  滚动
 52540  335

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    insist 0
    2018/8/9 17:30:49
    谷歌浏览器点完没反应
        ?花心境0
        2018/8/14 10:08:30
        我在谷歌浏览器演示,没有问题。
        Yyi1.0
        2022/5/26 17:03:32
        可以的
    回复
    0
    2018/7/10 15:16:31
    为什么放到我自己项目中就没用了 ,左侧栏不会高亮,点击也没用。也没报错
        ?花心境0
        2018/8/7 17:15:04
        部分页面由于渲染顺序,会导致获取不到每个楼层的高度。你可以放到window.onload = function(){}中执行。
    回复
    小鱼爱吃方便面 0
    2018/4/13 12:02:05
    侧栏f10 永远不会高亮啊
        ?花心境0
        2018/4/16 10:09:11
        是由于section的F10高度没有超过一屏,你把高度设置1000,就可以了。默认设置的是500,高度不够,一般实际开发的时候,f10下边还有页脚,所以也不会存在高度不够。在最后一个section设置style="height:1000px",就可以高亮 侧栏f10
        流年―忆影0
        2018/5/22 9:39:02
        加个底部就行
    回复
    MR SAINT 0
    2017/10/26 13:41:46
    南城北巷凉了海 0
    2017/10/12 9:00:50

    报错:Cannot read property 'top' of undefined

        ?花心境0
        2017/10/15 18:52:11

        是不是jquery没加载上,问题解决没?

        张慧慧0
        2018/1/24 18:38:01

        是的

    回复
    HUCONG你啊你 0
    2017/9/18 15:22:19
    请教一下,这个内容区的高度更改了,不会自适应的吗?
        ?花心境0
        2017/9/19 16:11:47
        你的内容区域高度更改是什么意思?存在点击过后的ajax加载数据?这样导致的高度改变,需要在源码中把初始化的代码到你的ajax中重新获取高度。
        ?花心境0
        2017/9/19 16:15:30

        因为像ajax这种局部刷新页面,不会使插件初始化高度重新获取,所以你说的这种情况需要根据需求修改源码,将获取高度那到你改变高度的位置重新获取高度,这样才准确。

        ?花心境3
        2017/9/19 16:20:24

        可以将getItem函数用window.getItem暴露到外部,然后在你改变高度的位置,重新执行这个函数,就可以了,但是注意传入该函数的参数值,即便你在外部执行,也需要传入对应参数。

        ?花心境0
        2017/9/30 14:48:19

        你好,感谢你发现的bug,目前新版本中已经将这个内容区高度改变,位置会随着改变!

    回复
    superXJg 0
    2017/9/6 19:04:04
    15708322265 0
    2017/8/22 15:42:48
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复