滚动监听实现

 $.fn.smartFloat = function () {
        var position = function (element) {
            var top = element.offset().top,array=[],content=$(".content .items");
            for(var i=1;i<content.length+1;i++){
                array[i]= $('.content .items:nth-child('+i+')').offset().top;
            }

            $(window).scroll(function () {
                var scrolls = $(this).scrollTop();
                for(var i=1;i<content.length+1;i++){
                    if(scrolls>array[i]&&scrolls<array[i+1]){
                        element.find("a").removeClass("active");
                        $('.slide li:nth-child('+i+')').find("a").addClass("active")
                    }else if(scrolls>array[i]){
                        element.find("a").removeClass("active");
                        $('.slide li:nth-child('+i+')').find("a").addClass("active")
                    }
                }
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            "position": "fixed",
                            "top": "70px",
                            "z-index": "1000"
                        })
                    } else { //如果是ie6
                        element.css({top: scrolls});
                    }
                } else {
                    element.css({"position": "relative","top":"0"})
                }
            });
        };
        return $(this).each(function () {
            position($(this));
        });
    };
    $("slide").smartFloat();

两个for循环实现监听分别获取高度和改变active的状态。
smartFloat()这个方法 ,不加这两个循环,是随屏幕滚动。。

**说明:**content= (.content.items) (‘.slide’) 相当于bootstrop 滚动监听的导航条。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值