jq實現監聽滾動條致使導航欄變色

時間 2019-11-08

原文原文鏈接

1效果圖css

2 htmlhtml

<!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 jqjquery

$(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','');
      }
    }
  })
})

相關標籤/搜索