javascript – How to use jquery to achieve that, when scrolling to the corresponding article, you can change the style of the tab menu


$(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: #ffc20e;
  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;
}
.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: linear-gradient(0deg, green 50%, #fff 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
    <ul class="header">
      <a href="#js-box1" class="item js-about">ABOUT</a>
      <a href="#js-box2" class="item js-service">SERVICE</a>
    </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>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here