Question

我正在尝试产生类似于：https://streetart.withgoogle.com/en/artist-stories

的效果

当显示相应的部分时，导航栏中的链接被着色，即当视口中显示相应的部分时，导航栏中的图库链接正在被白化。

我已经尝试了一切，我似乎无法弄清楚它是如何完成的。任何帮助表示赞赏！

Answer 1

您可以使用 inViewport jQuery plugin
并创建这样的东西：

/**
 * 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 >

原则是在您的havigation <a href="#page1">元素中使用链接锚点，并为页面部分<section id="page1">分配相同的ID

现在，无论是单击还是滚动页面，都会向锚点添加.active类，该部分在屏幕上可见。

滚动导航链接的样式

1 个答案: