向下滚动页面时突出显示导航链接 [英] Highlight navigation link as i scroll down the page

问题描述

我有一个简单的网页，如下面的代码：

 < nav> 
< a href =＃menu1> menu1< / a> 
< a href =＃menu2> menu2< / a> 
< a href =＃menu3> menu3< / a> 
< a href =＃menu4> menu4< / a> 
< / nav> 
 
 
< section id =menu1>< / section> 
< section id =menu2>< / section> 
< section id =menu3>< / section> 
< section id =menu4>< / section> 
  

当我向下滚动页面时，如何更改每个导航链接？

是否可以使用css完成？

以下是小提琴

我需要灰色的背景颜色来改变当我改变部分。 ..

解决方案

概念细分：

如果first.y> current - >首先显示
（如果first.y），则将每个div分配给变量
。当前<第二个 - >显示第二个等等等等。

这里有一些代码来说明这个例子

  $（document）.scroll（function（）{
 var scroll_top = $（document）.scrollTop（）; 
 var div_one_top = $（'＃one'）。position（）。 top; 
 var div_two_top = $（'＃two'）。position（）。top; 
 
 if（scroll_top> div_one_top&& scroll_top< div_two_top）{
 //你现在已经过去了div 
 $（'＃sidebar'）。text（'One'）; 
} else if（scroll_top> div_two_top）{
 //你是（''sidebar'）。text（'Two'）; 
} 
}）;现在过去div div 
 $（'＃sidebar'）。 
  

在您的情况中，开关（y pos）可能会更好

I have a simple page like the code below

<nav>
    <a  href="#menu1">menu1</a>
    <a  href="#menu2">menu2</a>
    <a  href="#menu3">menu3</a>
    <a  href="#menu4">menu4 </a>
</nav>


<section id="menu1"></section>      
<section id="menu2"></section>          
<section id="menu3"></section>          
<section id="menu4"></section>

How can I highlight each navigation link when I change the section, as I scroll down the page?

Is it possible to be done using css?

Here is an example in fiddle

I need the grey background color to change when i change section...

解决方案

Concept broken down:

Get at what height each div is and assign it to a variable if first.y > current -> show first if first.y < current < second -> show second etc etc

here is some code to illustrate the example

$(document).scroll(function() {
    var scroll_top = $(document).scrollTop();
    var div_one_top = $('#one').position().top;
    var div_two_top = $('#two').position().top;

    if(scroll_top > div_one_top && scroll_top < div_two_top) {
        //You are now past div one
        $('#sidebar').text('One');
    } else if( scroll_top > div_two_top) {
        //You are now past div two
       $('#sidebar').text('Two');
    }
});

in your case a switch(y pos) might be better

这篇关于向下滚动页面时突出显示导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！