如何通过滚动更改标签项样式？

时间：2017-10-24 07:18:09

标签： javascript jquery html css

以下是我的代码的简化：

＆＃13;
＆＃13; 
#header{
  background-color: #f1f1f1;
  height: 30px;
  border-bottom: 1px solid #ccc;
  padding: 10px 15px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
#logo{
  float: left;
  font-weight: bold;
  font-size: 18px;
}
ul{
  display: inline;
}
li{
  display: inline-block;
  padding: 0px 30px;
}
.active{
  color: red !important;
}
a{
  color: gray;
  text-decoration: none;
}
#container{
  margin-top: 70px;
}
＆＃13; 
<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs">
    <li><a href="#i1" class="active">Item 1</a></li>
    <li><a href="#i2">Item 2</a></li>
    <li><a href="#i3">Item 3</a></li>
    <li><a href="#i4">Item 4</a></li>
  </ul>
</div>

<div id="container">
  <div id="i1">
    <h2>Item 1</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i2">
    <h2>Item 2</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i3">
    <h2>Item 3</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i4">
    <h2>Item 4</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我尝试做的只是通过滚动来更改项目（在标题中）的颜色。我的意思是，当用户滚动并且.active位于页面顶部时，我想将a[href="i2"]类添加到div#i2 （将其设为红色）元素。我怎么能这样做？

我可以根据滚动更改类属性吗？

2 个答案:

答案 0 :(得分：2)

没有JQUERY：

＆＃13;
＆＃13; 
 // To remember the current active tab
 let currentTab = 1 ;

 // Without jQuery, I get the parent items top
 let topContainer = document.getElementById('container').offsetTop;

 // I get the top of each item, in a table
 let stateItems = {};

 for(let i = 1 ; i < 5 ; ++ i)
 {
   stateItems[i] = {
     top: topContainer + document.getElementById('i'+i).offsetTop,
     actived: i == 1
   };
 }

 // To adjust: I want the active class to be applied just
 // when the title reachs the top of the window (under the header)
 const DecFromTop = 120 ;

 // I deal with scroll event
 window.onscroll = function(evt){

    // the current scroll, adjusted
    let wY = window.scrollY + DecFromTop;

    // For convenience (see above)
    let topItem = 0 ;
    
    // A loop on each tab
    for(let i = 1 ; i < 5 ; ++ i){

      // Can't be this one
      if ( i == currentTab ) { continue } ;

      // I take the item top props
      topItem = stateItems[i];

      // I only apply and remove class on ± 10 px, once

      if ( wY > topItem.top - 10 && wY < topItem.top + 10)
      {
        // <= Scrolling ± 10 px the current checked item
        // => I have to change the current tab

        // Once

        if ( false == topItem.actived ) 
        {
          // <= Not actived yet
          // => I have to activate it and desactivate the current
 
          // Remove prev tab class
          document.getElementById('tab'+currentTab).className = '';
          stateItems[currentTab].actived = false ;
        
          // Add new tab class
          document.getElementById('tab'+i).className = 'active';
          topItem.actived = true ;

          // Remember current tab
          currentTab = i;
        }
      }
    }
  }
＆＃13; 
   #header{
      background-color: #f1f1f1;
      height: 30px;
      border-bottom: 1px solid #ccc;
      padding: 10px 15px;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    #logo{
      float: left;
      font-weight: bold;
      font-size: 18px;
    }
    ul{
      display: inline;
    }
    li{
      display: inline-block;
      padding: 0px 30px;
    }
    .active{
      color: red !important;
    }
    a{
      color: gray;
      text-decoration: none;
    }
    #container{
      margin-top: 70px;
    }
＆＃13; 
<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs">
    <li><a id="tab1" href="#i1" class="active">Item 1</a></li>
    <li><a id="tab2" href="#i2">Item 2</a></li>
    <li><a id="tab3" href="#i3">Item 3</a></li>
    <li><a id="tab4" href="#i4">Item 4</a></li>
  </ul>
</div>

<div id="container">
  <div id="i1">
    <h2>Item 1</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i2">
    <h2>Item 2</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i3">
    <h2>Item 3</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i4">
    <h2>Item 4</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用scrollTop（）查找当前滚动，并使用每个块的offset（）。top，这是代码。

＆＃13;
＆＃13; 
$(window).scroll(function(){
  var x = $(window).scrollTop();
  var i1 = $('#i1').offset().top;
  var i2 = $('#i2').offset().top;
  var i3 = $('#i3').offset().top;
  var i4 = $('#i4').offset().top;
  var offset = 110; //px
  //console.log(i1,i2,i3,i4,x);
  if(x>i1 - offset && x < i2){
    $('.links').removeClass('active');
    $("a[href='#i1']").addClass('active');
  }
  if(x>i2 - offset && x < i3){
    $('.links').removeClass('active');
    $("a[href='#i2']").addClass('active');
  }
  if(x>i3 - offset && x < i4 ){
    $('.links').removeClass('active');
    $("a[href='#i3']").addClass('active');
  }
  if(x>i4 || ($(window).scrollTop() + $(window).height() == $(document).height())
  ){
    $('.links').removeClass('active');
    $("a[href='#i4']").addClass('active');
  }
  
  
});
＆＃13; 
#header{
  background-color: #f1f1f1;
  height: 30px;
  border-bottom: 1px solid #ccc;
  padding: 10px 15px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
#logo{
  float: left;
  font-weight: bold;
  font-size: 18px;
}
ul{
  display: inline;
}
li{
  display: inline-block;
  padding: 0px 30px;
}
.active{
  color: red !important;
}
a{
  color: gray;
  text-decoration: none;
}
#container{
  margin-top: 70px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs">
    <li><a href="#i1" class="links active">Item 1</a></li>
    <li><a href="#i2" class="links " >Item 2</a></li>
    <li><a href="#i3" class="links ">Item 3</a></li>
    <li><a href="#i4" class="links ">Item 4</a></li>
  </ul>
</div>

<div id="container">
  <div id="i1">
    <h2>Item 1</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i2">
    <h2>Item 2</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i3">
    <h2>Item 3</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i4">
    <h2>Item 4</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题