在jquery中檢測滾動時如何更改菜單樣式

Question

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

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

附圖是我希望達到的效果。 謝謝大家的幫助。

 $(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>

Answer 1

您可以檢查第二部分的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從最后一節開始，您也可以對以下部分執行此操作，也可以使用else if 。