在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 。