滚动条滚动到指定位置时,执行特定的操作

前端技术 - jQuery

一帘幽梦 2017-9-28 9:09:16

很多时候,人们希望当滚动条滚动到指定位置时,执行特定的操作。比如,滚动条滚动到指定位置时,自动加载某元素;滚动条滚动到指定位置时,固定导航栏等等。

滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

//滚动到指定元素的id处 如:$("#Exam82")        
function Jump() {    
    //得到Exam82这个div层的offset,包含两个值,top和left        
  var scroll_offset = $("#Exam82").offset();   
           
  $("body,html").animate({
      //让body的scrollTop等于Exam82的top,就实现了滚动          
    scrollTop: scroll_offset.top             
    }, 2000); //2000 控制滚动的速度
}        

//当元素出现在浏览器显示区域就会自动加载        
function autoloading() {
    //获取$("#Exam86")距离顶部的距离($("#Exam86").offset().top)-浏览器显示区域的高度($(window).height())
    var totalheight = parseFloat($("#Exam86").offset().top) - parseFloat($(window).height());   
             
  //获取滚动条到顶部的垂直高度            
  var guen = $(document).scrollTop();     
       
  if (parseInt(totalheight) < parseInt(guen)) {                
    alert("加载中。。。");            
  }        
}

滚动条滚动到指定位置时,将导航栏固定在顶部

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>js滚动到指定位置导航栏固定顶部</title>
    <style type="text/css">
      body {
        height:2500px;
        margin:0;
        padding:0;
      }
      .banner {
        height:250px;
        width:100%;
        background:#e5e5e5;
      }
      .bignav {
        width:100%;
        background:#000;
      }
      .nav {
        background:#000;
        width:1200px;
        margin:0 auto;
        height:45px;
      }
      .nav a {
        display:block;
        width:200px;
        float:left;
        color:#fff;
        text-decoration:none;
        text-align:center;
        line-height:45px;
      }
    </style>
  </head>
  <body>
    <div class="banner">
        
    </div>
    <div class="bignav" id="bignav">
      <div class="nav">
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
      </div>
    </div>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    
    <script type="text/javascript">
    window.onscroll=function(){
      var topScroll =document.body.scrollTop; //滚动的距离,距离顶部的距离
      var bignav  = document.getElementById("bignav"); //获取到导航栏id
      
      if(topScroll > 250){  //当滚动距离大于250px时执行下面的东西
        bignav.style.position = 'fixed';
        bignav.style.top = '0';
        bignav.style.zIndex = '9999';
      }else{ //当滚动距离小于250的时候执行下面的内容,也就是让导航栏恢复原状
        bignav.style.position = 'static';
      }
    }
    </script>
  </body>
</html>

滚动条滚动到指定位置时,滑入显示某个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .test{
      margin:900px auto 500px;
      width:800px;
      height:600px;
      position: relative;
      background-color: #00ac61;
    }
    .target{
      position: absolute;
      left:200px;
      width:400px;
      height:300px;
      opacity: 0;
      background-color: palevioletred;
    }
  </style>
  <script src="./js/jquery-1.11.3.min.js"></script>
</head>
<body>
 
  <div class="test">
    <div class="target">
      test test test 
    </div>
  </div>
  <script>
  $(function(){
    var targetHeight = $(".test").offset().top;
    $(window).scroll(function(){
          slideIn($(".target"),150);
    });
    function slideIn(obj,left){
      var targetHeight = obj.offset().top;
      var scrollTop = $(this).scrollTop();
      if(scrollTop>targetHeight-400){
        obj.animate({left:left+'px',opacity:1,filter:'Alpha(opacity=90)'},500);
      }
    };
  });
  </script>
</body>
</html>
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验