滚动导航链接的样式

Styling of nav links on scroll

本文关键字：样式 链接 导航 滚动      更新时间：2023-09-26

我想做一个类似的效果:https://streetart.withgoogle.com/en/artist-stories

，当相应的部分显示时，导航栏中的链接被涂上颜色，即当相应的部分显示在视口中时，导航栏中的画廊链接被涂上白色。

我什么都试过了，但我似乎不知道是怎么做到的。任何帮助都是感激的!

你可以使用inViewport jQuery插件
然后创建如下内容:

/**
 * inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
 *
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 * The max returned value is the element height + borders)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

// let's use it!
$aLinks = $("ul a");
$("[id^=art]").inViewport(function(px){
  if(px){
    $aLinks.removeClass("active");
    $("a[href=#"+ this.id +"]").addClass("active"); 
  } 
});
*{margin:0;padding:0;}
p{height:2000px;}
h1{
  padding:60px 0;
}
ul{
  position:fixed;
  width:100%;
}
ul li{
  display:inline-block;
}
ul li a{
  padding:15px 10px;
  display:inlin-block;
  transition:0.3s;
}
.active{
  background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#art1">Article 1</a></li>  
  <li><a href="#art2">Article 2</a></li>  
  <li><a href="#art3">Article 3</a></li>  
  <li><a href="#art4">Article 4</a></li>  
</ul>
<section id="art1">
  <h1>Article 1</h1>
  <p>Article content 1</p>
</section >
<section id="art2">
  <h1>Article 2</h1>
  <p>Article content</p>
</section >
<section id="art3">
  <h1>Article 3</h1>
  <p>Article content</p>
</section >
<section id="art4">
  <h1>Article 4</h1>
  <p>Article content</p>
</section >

原则是在导航<a href="#page1">元素中使用链接锚，并为页面部分<section id="page1">

分配相同的ID

现在无论是点击或滚动页面将添加一个.active类锚，部分是可见的屏幕上

相关文章：