美文网首页JQuery
JQuery监听页面滚动事件

JQuery监听页面滚动事件

作者: 西瓜炒苦瓜 | 来源:发表于2017-04-23 23:19 被阅读682次

    1、当前滚动的地方的窗口顶端到整个页面顶端的距离:
    var scrollTop = $(window).scrollTop();
    2、获取指定元素的页面位置:
    $(obj).offset().top;
    3、对页面滚动条滚动的监听:要放在页面加载的时候
    $(window).scroll(function(event){
    });
    4、设置滚动条到指定位置。$(window).scrollTop(offset)
    HTML:结构层
    <div class="box">
    <div class="nav"></div>
    <div class="banner"></div>
    </div>
    CSS:样式层
    {
    margin:0;
    padding:0;
    }
    .box{
    width:100%;
    height:1500px;
    }
    .nav{
    width:100%;
    height:800px;
    background:red;
    }
    emphasized text*
    .banner{
    width:100%;
    height: calc(1500px - 1000px);
    background:#000;
    }
    javascript:行为层
    $(document).ready(function(){
    //获取banner的高度
    var bannerH=$(".banner").offset().top;
    // console.log(bannerH);
    //滚动事件
    $(window).scroll(function(){
    //滚动的高度
    var scrollTop=$(this).scrollTop();
    console.log(scrollTop);
    //判断bannerH大于或者等于scrollTop高度
    if(scrollTop >= bannerH ){
    $(".nav").css("background","#000");
    $(".banner").css("background","red");
    }else{
    $(".nav").css("background","red");
    $(".banner").css("background","#000");
    }
    })
    });
    1、当前滚动的地方的窗口顶端到整个页面顶端的距离:
    var scrollTop = $(window).scrollTop();
    2、获取指定元素的页面位置:
    $(obj).offset().top;
    3、对页面滚动条滚动的监听:要放在页面加载的时候
    $(window).scroll(function(event){
    });
    4、设置滚动条到指定位置。$(window).scrollTop(offset)
    HTML:结构层
    <div class="box">
    <div class="nav"></div>
    <div class="banner"></div>
    </div>
    CSS:样式层
    {
    margin:0;
    padding:0;
    }
    .box{
    width:100%;
    height:1500px;
    }
    .nav{
    width:100%;
    height:800px;
    background:red;
    }
    emphasized text*
    .banner{
    width:100%;
    height: calc(1500px - 1000px);
    background:#000;
    }
    javascript:行为层
    $(document).ready(function(){
    //获取banner的高度
    var bannerH=$(".banner").offset().top;
    // console.log(bannerH);
    //滚动事件
    $(window).scroll(function(){
    //滚动的高度
    var scrollTop=$(this).scrollTop();
    console.log(scrollTop);
    //判断bannerH大于或者等于scrollTop高度
    if(scrollTop >= bannerH ){
    $(".nav").css("background","#000");
    $(".banner").css("background","red");
    }else{
    $(".nav").css("background","red");
    $(".banner").css("background","#000");
    }
    })
    });

    相关文章

      网友评论

        本文标题:JQuery监听页面滚动事件

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