jQuery移动端滚动定位插件

所属分类:UI,导航-滚动,垂直导航

 31937  326  查看评论 (15)
分享到微信朋友圈
X
jQuery移动端滚动定位插件 ie兼容11

注:请在移动端查看效果!

更新时间:2018/5/29 16:50:08

更新说明:更新了另一种形式的移动端分类菜单,点击头部跳转另一个页面,数据联动自己加上就可以了,我只是做演示效果,如果拿之前的页面来改确实会给人误解,所以出了另一个版本的

$(window).width()/ 375 * 50 * 1 //把头部高度换算为px

界面看着有点粗糙是用rem单位写的所以对pc端浏览很不友好,f12用手机模式看吧,

代码写的有点菜,但是写出了我想要的效果,

欢迎指正错误,谢谢!

相关插件-滚动,垂直导航

常用的根据高度自动切换效果

常用的根据高度自动切换效果 简单 下载下来之后可以直接是用 兼容性好 不存在兼容问题
  滚动
 28904  344

jQuery.nicescroll美化滚动条

自定义scroll的样式,可配置
  滚动
 93398  505

jQuery自定义滚动条插件

支持IE9及以上,360,谷歌,火狐的自定义滚动条,可以设置滚动条的初始位置以及滚动条的颜色等
  滚动
 28692  316

jQuery美化滚动条插件mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 34353  335

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

    旭日东升 0
    2019/7/12 8:38:30
    有bug呀 js控制scroll 会触发scroll事件,导致要点两次才能选中左侧 整体来说bug还是比较多的 回复
    西西‖1997° 0
    2019/3/5 14:58:33
    弗洛加特 0
    2019/2/21 15:26:56
    写的挺好的啦,个人觉得$(window).width()/ 375 * 50 * 1 ,可以替换为获取头部高度,但有一个问题得问下,var font = document.documentElement.clientWidth / 375 * 50; 没看明白,375是iPhone6的尺寸吗,50是什么意思?
        叮 ?猫??1
        2021/7/16 14:47:28
        根字体大小。
        假如根字体是100px,你设置的元素字体是16px,换算下来就是.16rem;
        所以根字体可根据个人习惯来设置
    回复
    I'm here. 0
    2018/10/19 21:20:10
    能做一个水平导航的吗 回复
    0
    2018/8/29 15:45:48
    ios下有bug
        飞翔♂の风0
        2018/8/30 8:57:45
        什么问题
        Radish~0
        2018/11/1 10:40:01
        什么浏览器
    回复
    茶的清香 0
    2018/8/3 13:27:09
    为什么点击左边的按件。要按两下才增加class??
        飞翔♂の风0
        2018/8/30 8:59:13
        我的例子并没有这个问题
        yUan440
        2018/9/10 16:26:07
        这个线上的demo也是要点击左侧列表两下才能增加class on
        飞翔♂の风0
        2018/9/11 9:23:01
        不知道你用的什么浏览器,我用的谷歌,手机测试都没有你说的问题,就一个click事件,也不存在点击两次的问题
        ?(?????)??、窃??0
        2022/3/11 1:20:16
        我的也是存在需要点击两次才能增加 class on
    回复
    福寿禄 0
    2018/5/28 15:06:18
    目测很好
        w先生0
        2018/7/28 16:44:47
        咋实现的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复