美文网首页让前端飞
鼠标滚动固定js(jquery)实例分享

鼠标滚动固定js(jquery)实例分享

作者: 2d169b448a10 | 来源:发表于2017-10-18 21:24 被阅读0次

    当然,大家都挺忙,直接说目前我在用的方案、调用方式以及源码,然后再扩展的说!

    方案:scrollfix.js

    推荐理由:可指定元素,可指定高度,可指定位置,可指定跟踪元素,还想怎样?顶多也就差个animate.css使它更酷炫了。

    应用实例:找前辈网前辈详情页-左右导航

    调用方式:$("#fix").scrollFix({

    startTop:"#startTop",

    distanceTop:20,

    endPos:"#footer"

    });

    源码下载:

    scrollfix-master

    参考演示

    http://www.jq22.com/yanshi9192

    参数说明:

    参数名字参数值参数作用

    startTopnull开始固定的jquery对象的顶部

    startBottomnull开始固定的jquery对象末端,两个参数都设置的话,默认后面参数生效

    distanceTop0/null数值,距离顶部的高度,可以为高度或者jquery对象

    endPosnull/0距离底部的高度,可以为高度或者jquery对象

    bottom-1默认不使用位置为bottom的值,当设置为0,将会停在窗口底端

    zIndex0当没有设置这个值时,将默认使用元素的css z-index值

    baseClassName'scrollfixed'当元素开始固定时给它添加一个class,你可以设置为你喜欢的类名。

    1、startTop:null

    不设置:鼠标滚动,指定元素开始滚动则开始浮动。

    设置:如startTop:"#startTop",则到了#startTop顶部开始浮动指定元素

    2、startBottom:null

    不设置:鼠标滚动,指定元素开始滚动则开始浮动。

    设置:如startTop:"#startTop",则到了#startTop底部开始浮动指定元素。(设置同一个元素会冲突,将以这个为准)。

    3、distanceTop:0

    距离顶部的高度,默认为0。

    4、endPos:0

    距离顶部的高度为多少时停止浮动,并固定在相应位置,可以指定jquery对象,如:endPos:"#footer",也可以是数字:endPos:300.

    5、ottom:-1

    默认不使用位置为bottom的值,当设置为0,将会停在窗口底端

    6、zIndex:0

    当没有设置这个值时,将默认使用元素css的z-index值

    7、baseClassName:scrollfixed

    当元素开始固定时给它添加一个class,你可以设置为你喜欢的类名。

    注意:

    使用时,css添加的属性为position:static。元素出现在正常文本流中,跟经常用的position:fixed脱离文本流不同。

    扩展阅读:

    在固定导航方案中,一般都是响应鼠标滚动,即鼠标开始滚动则固定,比如顶部导航。或者响应元素位置,即元素出现了,则固定,这两种模式。

    而固定位置一般分为顶部导航,侧边栏导航,两侧广告和底部栏导航等。

    固定的插件较多,可参考:

    1、分享9个滚动粘卷jQuery Sticky Scroll插件

    2、jQuery滑动固定插件scrollfix

    3、http://amazeui.org/javascript/sticky

    相关文章

      网友评论

        本文标题:鼠标滚动固定js(jquery)实例分享

        本文链接:https://www.haomeiwen.com/subject/jyzeuxtx.html