在jquery中檢測滾動時如何更改選單樣式-有解無憂

我有一個問題，不知道該怎么做才能實作它！

情況就是這樣。希望在滾動文章的時候，比如滾動到文章的服務部分時，header的服務此時可以添加黃色的CSS樣式，但是我只會增加點擊時的樣式，以及如何添加滾動。不知道你是否改變了頁眉的樣式？

附圖是我希望達到的效果。謝謝大家的幫助。在jquery中檢測滾動時如何更改選單樣式

$(document).ready(function(){
  $('.item').click(function(e){
    e.preventDefault();
    let target = $(this).attr('href');
    // console.log(target);
    let position = $(target ).offset().top - 20;
    // console.log(target,position) 
    $('.content').animate({scrollTop: position}, 1000);
  })
  
   $(window).scroll(function(){
     console.log('scroll');
   });
})

//add active CSS
 $('.js-about').on('click',function(){
      $('.js-about').addClass('active');
      $('.js-service').removeClass('active');
})

 $('.js-service').on('click',function(){
      $('.js-service').addClass('active');
      $('.js-about').removeClass('active');
})

.wrap {
  width: 500px;
  background-color: #c7e1fc;
  border-radius: 20px;
  padding: 20px;
  margin: 60px auto;
}
.wrap .header {
  display: flex;
  border-bottom: 2px solid #222;
  padding: 10px;
}
.wrap .header .item {
  margin-right: 60px;
  text-decoration: none;
  font-weight: 600;
  color:#222;
}
.wrap .content {
  height: 500px;
  overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
  margin: 30px;
}
.wrap .content h2 {
  display: inline-block;
  font-weight: 900;
  font-size: 36px;
  background-color: #222;
  color: #fff;
  padding: 10px;
}
.wrap .content p {
  font-size: 16px;
  line-height: 1.5;
}
.wrap .box2 {
  height: 490px;
}

.active {
  font-weight: 500;
  color: #000;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
    <ul class="header">
      <li><a href="#js-box1" class="item js-about">ABOUT</a></li>
      <li><a href="#js-box2" class="item js-service">SERVICE</a></li>
    </ul>
  <div class="content">
    <section class="box1" id="js-box1">
         <h2 class="about">about</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,</p>
    </section>
     <section class="box2" id="js-box2">
         <h2 class="service">service</h2>
     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .
uptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .</p>
     </section>
  </div>
</div>

uj5u.com熱心網友回復：

您可以查看offset().top第二部分的。像這樣：

$(document).ready(function(){
  $('.item').click(function(e){
    e.preventDefault();
    let target = $(this).attr('href');
    // console.log(target);
    let position = $(target ).offset().top - 20;
    // console.log(target,position) 
    $('.content').animate({scrollTop: position}, 1000);
  })
  
  $('*').scroll(function(){
    if($('#js-box2').offset().top - $('.wrap').offset().top < $('.header').height()   50) {
      $('.js-about').removeClass('active');
      $('.js-service').addClass('active');
    }
    else {
      $('.js-about').addClass('active');
      $('.js-service').removeClass('active');
    };
  });
})

.wrap {
  width: 500px;
  background-color: #c7e1fc;
  border-radius: 20px;
  padding: 20px;
  margin: 60px auto;
}
.wrap .header {
  display: flex;
  border-bottom: 2px solid #222;
  padding: 10px;
}
.wrap .header .item {
  margin-right: 60px;
  text-decoration: none;
  font-weight: 600;
  color:#222;
}
.wrap .content {
  height: 500px;
  overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
  margin: 30px;
}
.wrap .content h2 {
  display: inline-block;
  font-weight: 900;
  font-size: 36px;
  background-color: #222;
  color: #fff;
  padding: 10px;
}
.wrap .content p {
  font-size: 16px;
  line-height: 1.5;
}
.wrap .box2 {
  height: 490px;
}

.active {
  font-weight: 500;
  color: #000;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <ul class="header">
    <li><a href="#js-box1" class="item js-about active">ABOUT</a></li>
    <li><a href="#js-box2" class="item js-service">SERVICE</a></li>
  </ul>
  <div class="content">
    <section class="box1" id="js-box1">
      <h2 class="about">about</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat.</p>
    </section>
    <section class="box2" id="js-box2">
      <h2 class="service">service</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat.</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat.</p>
    </section>
  </div>
</div>

您也可以使用else if從最后一個開始的方式對以下部分執行此操作。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344718.html

標籤：javascript 查询 css

上一篇：使用flexcss樣式時的自定義控制元件寬度

下一篇：如何根據父級按比例調整子影像的大小？