Loading

jq实现监听滚动条导致导航栏变色

1效果图

 

 

 2 html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试页面</title>
  <script src="../js/lib/jquery-3.2.1.min.js"></script>
  <style>
    #ul{
      list-style: none;
      background-color:darkgray;
      height:30px;
      width:100%;
      padding:0;
      position:fixed;
      margin-top:0;
    }
    #ul li{
      height:30px;
      line-height:30px;
      width:100px;
      float:left;
      display:block;
      margin:auto;
      text-align: center;
    }
    #ul li:hover{
      background-color:red;
    }
  </style>
</head>
<body>
  <ul id="ul">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
  </ul>
<div style="height:500px;" id="div1"></div>
<div style="height:500px;" id="div2"></div>
<div style="height:500px;" id="div3"></div>
<div style="height:500px;" id="div4"></div>
<div style="height:500px;" id="div5"></div>
<script src="../js/test.js"></script>
</body>
</html>
View Code

3 jq

$(function(){
  var length = $('#ul li').length;
  $(document).scroll(function(){
    for(let i =0;i<length;i++){
      let top = $('div').eq(i).offset().top;//获取当前元素离顶部的距离
      let scrop = $(document).scrollTop();//获取页面滚动条离顶部的距离
      console.log(scrop +' '+top);
      if(scrop>top){
        $('#ul li').eq(i).css('color','red');
        $('#ul li').eq(i).siblings().css('color','');
      }
    }
  })
})

 

posted @ 2019-10-17 16:32  逝zxq  阅读(1404)  评论(0)  编辑  收藏  举报