滚动监听实例

滚动监听

要点：

1、scrollTop()的运用

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset

指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

 2、offset()的运用

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

3、offset()和position()

offset():获取匹配元素在当前视口的相对偏移。（绝对位置）

position()：获取匹配元素相对父元素的偏移。（相对位置）

同样该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

4、document.documentElement.scrollTop：获得当前滚动条距离页面顶部的距离

实例1：

<div class="daohang value_daohang">
            <div class="daohang_top">
                <a href="../../public/duba170724_100_50.exe" class="daohang_top_a">
                    <div>
                        <img src="../../img/2018-07-03_161728.png" alt="">
                    </div>
                </a>
            </div>
            <div class="daohang_bottom">
                <h2>
                    <div class="daohang_bottom_div"></div>
                    为您推荐
                </h2>
<!--                下方导航-->
                <ul class="danghang_ul">
                    <li><span class="bianse">1</span><a href="">猎豹浏览器</a></li>
                    <li><span class="bianse">2</span><a href="">金山毒霸</a></li>
                    <li><span class="bianse">3</span><a href="">驱动精灵</a></li>
                    <li><span>4</span><a href="">猎豹免费wifi</a></li>
                    <li><span>5</span><a href="">金山顽固木马专杀</a></li>
                    <li><span>6</span><a href="">金山急救箱</a></li>
                    <li><span>7</span><a href="">猎豹护眼大师</a></li>
                    <li><span>8</span><a href="">猎豹日历</a></li>
                    <li><span>9</span><a href="">猎豹轻桌面</a></li>
                    <li><span>10</span><a href="">数据恢复</a></li>
                    <li><span>11</span><a href="">CAD病毒专杀</a></li>
                    <li><span>12</span><a href="">更多</a></li>
                </ul>
            </div>
        </div>

//放在页面加载完成中    
addtop = $(".value_daohang").offset().top;//第一个导航获得div页面加载完成时距离顶部的距离
    Y = $('.value_daohang').offset().left;//第一个导航绝对位置
    X = $('.value_div').position().left;//第一个导航的相对位置

//第一个右侧导航栏移动
$(window).scroll(function(){
    var navH = document.documentElement.scrollTop;//获得当前滚动条距离页面顶部的距离
//    对比当前元素距离顶部的距离和滚动条的距离
    if(navH >= addtop){
        $(".value_daohang").css({"position":"fixed","top":0,"left":Y});
        $(".haha_daohang").css({"position":"fixed","top":0,"left":Y})
    }else if(navH < addtop){
        $(".value_daohang").css({"position":"relative","top":0,"left":-X});
        $(".value_daohang").css("float","right");
        $(".haha_daohang").css({"position":"relative","top":0,"left":-X});
        $(".haha_daohang").css("float","right");
    }
})

实例2：

<div class="tiaozhuan_zong">
        <div class="tiaozhuan_top"><img src="../../img/2018-07-05_092905.png" alt=""></div>
        <div class="tiaozhuan_1 geshi yellow" go="1"><strong>T1</strong></div>
        <div class="tiaozhuan_2 geshi" go="2"><strong>T2</strong></div>
        <div class="tiaozhuan_3 geshi" go="3"><strong>T3</strong></div>
        <div class="tiaozhuan_4 geshi" go="4"><strong>T4</strong></div>
        <div class="tiaozhuan_5 geshi" go="5"><strong>T5</strong></div>
        <div class="tiaozhuan_6 geshi" go="6"><strong>T6</strong></div>
    </div>

    weizhi = [];//定义各个模块距离顶部的位置为一个数组
    for(var i=0 ; i<$('.wwy').length; i++){
        weizhi.push($('.wwy').eq(i).offset().top);
    }//得到每个模块距离顶部的高度并追加进数组
    })

//返回顶部方法
function addEvent_10(){
    $(".tiaozhuan_top").click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');//返回页面顶部
    })
}
//对应变色和跳转
function addEvent_11(){
    $(".geshi").click(function(){
        var www = $(this).attr('go');//获得对应元素属性
        var    xxx = weizhi[www-1];//将对应高度进行匹配
        $("html,body").animate({'scrollTop':xxx}, 'slow');//将得到的对应数组值加入移动到对应高度
        $(".geshi").removeClass('yellow');//移除所有自定义class值
        $(".tiaozhuan_"+www).addClass('yellow');//对应元素追加class
    })
}