根据滚动位置突出显示链接

Question

我试图让我的链接突出显示，如果用户正在滚动该链接的页面。但由于某种原因，它不能正常工作。我已经评论了我的第一次尝试在jQuery中，并再次尝试，但链接二是强调链接应该。

<nav> 
    <ul> 
    <li><a href="" id="link_1">Link 1</a></li> 
    <li><a href="" id="link_2">Link 2</a></li> 
    <li><a href="" id="link_3">Link 3</a></li> 
    </ul> 
    <p></p> 
</nav> 

<div id="sec_one" class="sections"> 

</div> 

<div id="sec_two" class="sections"> 

</div> 

<div id="sec_three" class="sections"> 

</div> 

<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 

*{ 
    margin: 0; 
    padding: 0; 
} 
nav{ 
    width: 100%; 
    background-color: black; 
    position: fixed; 
    top: 0; 
} 

nav ul{ 
    width: 50%; 
    margin: 0 auto; 
    list-style-type: none; 
    text-align: center; 
} 

nav ul li{ 
    display: inline; 
    width: 100%; 
} 

nav ul li a{ 
    font-size: 40px; 
    color: white; 
    text-decoration: none; 
} 

nav ul li a{ 

} 

.sections{ 
    width: 100%; 
    height: 2000px; 
} 

#sec_one{ 
    background-color: blue; 
} 

#sec_two{ 
    background-color: red; 
} 

#sec_three{ 
    background-color: yellow; 
} 

.active{ 
    background-color: #666666; 
} 

p{ 
    color: white; 
} 

$(window).scroll(function(){ 
    var scrollPos = $(window).scrollTop(); 
    var page1Top = $("#sec_one").scrollTop(); 
    var page1Bot = $("#sec_one").outerHeight(); 

    var page2Top = $("#sec_two").scrollTop(); 
    var page2Bot = $("#sec_two").outerHeight(); 

    var page3Top = $("#sec_three").scrollTop(); 
    var page3Bot = $("#sec_three").outerHeight(); 

/*if(scrollPos >= page1Top && scrollPos < page1Bot){ 
    $("#link_1").addClass("active"); 
    $("#link_2").removeClass("active"); 
    $("#link_3").removeClass("active"); 
    }else if(scrollPos >= page2Top && scrollPos < page2Bot){ 
    $("#link_1").removeClass("active"); 
    $("#link_3").removeClass("active"); 
    $("#link_2").addClass("active"); 
    }else if(scrollPos >= page3Top && scrollPos < page3Bot){ 
    $("#link_3").addClass("active"); 
    $("#link_1").removeClass("active"); 
    $("#link_2").removeClass("active"); 
    }*/ 

    if(scrollPos >= page1Top && scrollPos < page1Bot){ 
    $("#link_1").addClass("active"); 
    $("#link_2").removeClass("active"); 
    $("#link_3").removeClass("active"); 
    }else { 
     $("#link_1").removeClass("active"); 
    } 

    if(scrollPos >= page2Top && scrollPos < page2Bot){ 
    $("#link_2").addClass("active"); 
    $("#link_1").removeClass("active"); 
    $("#link_3").removeClass("active"); 
    }else { 
     $("#link_2").removeClass("active"); 
    } 

}); 

Answer 1

你的主要问题是你不使用.offset() - 与您的代码你刚刚相对于自身的位置使顶部总是变得0和底部变得2000 - 使用offset将意味着你得到相对于文档的位置，以便它也考虑到其他元素。

此外，您不需要检查底部位置。您可以使用下一部分的顶部位置。

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    var scrollPos = $(window).scrollTop(); 
 
    
 
    var page1Top = $("#sec_one").offset().top; 
 
    var page2Top = $("#sec_two").offset().top; 
 
    var page3Top = $("#sec_three").offset().top; 
 

 
    if (scrollPos >= page1Top && scrollPos < page2Top) { 
 
     $("#link_1").addClass("active"); 
 
     $("#link_2").removeClass("active"); 
 
     $("#link_3").removeClass("active"); 
 
    } else { 
 
     $("#link_1").removeClass("active"); 
 
    } 
 

 
    if (scrollPos >= page2Top && scrollPos < page3Top) { 
 
     $("#link_2").addClass("active"); 
 
     $("#link_1").removeClass("active"); 
 
     $("#link_3").removeClass("active"); 
 
    } else { 
 
     $("#link_2").removeClass("active"); 
 
    } 
 
    
 
    if (scrollPos >= page3Top) { 
 
     $("#link_3").addClass("active"); 
 
     $("#link_1").removeClass("active"); 
 
     $("#link_2").removeClass("active"); 
 
    } else { 
 
     $("#link_3").removeClass("active"); 
 
    } 
 

 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    background-color: black; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
nav ul { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
    width: 100%; 
 
} 
 

 
nav ul li a { 
 
    font-size: 40px; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li a {} 
 

 
.sections { 
 
    width: 100%; 
 
    height: 2000px; 
 
} 
 

 
#sec_one { 
 
    background-color: blue; 
 
} 
 

 
#sec_two { 
 
    background-color: red; 
 
} 
 

 
#sec_three { 
 
    background-color: yellow; 
 
} 
 

 
.active { 
 
    background-color: #666666; 
 
} 
 

 
p { 
 
    color: white; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="" id="link_1">Link 1</a></li> 
 
    <li><a href="" id="link_2">Link 2</a></li> 
 
    <li><a href="" id="link_3">Link 3</a></li> 
 
    </ul> 
 
    <p></p> 
 
</nav> 
 

 
<div id="sec_one" class="sections"></div> 
 
<div id="sec_two" class="sections"></div> 
 
<div id="sec_three" class="sections"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

避免个别元素的目标和使用粗糙的ID，你可以评估scrollTop和元素的offset().top并基于部分指数突出的项目你需要：

$(window).scroll(function() { 
 
    var scrollPos = $(window).scrollTop(), 
 
     navH  = $('nav').height(); 
 
    $('.sections').each(function(i){ 
 
    var offT = $(this).offset().top; 
 
    if((offT-scrollPos-navH) <= 0) { 
 
     $('.active').removeClass('active') 
 
     $('nav a').eq(i).addClass('active') 
 
    } 
 
    }) 
 
});

* { margin: 0; padding: 0;} nav { width: 100%; background-color: black; position: fixed; top: 0;} nav ul { width: 50%; margin: 0 auto; list-style-type: none; text-align: center;} nav ul li { display: inline; width: 100%;} nav ul li a { font-size: 40px; color: white; text-decoration: none;} .sections { width: 100%; height: 2000px;} #sec_one { background-color: blue;} #sec_two { background-color: red;} #sec_three { background-color: yellow;} .active { background-color: #666666;} p { color: white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="" id="link_1" class="active">Link 1</a></li> 
 
    <li><a href="" id="link_2">Link 2</a></li> 
 
    <li><a href="" id="link_3">Link 3</a></li> 
 
    </ul> 
 
    <p></p> 
 
</nav> 
 
<div id="sec_one" class="sections"></div> 
 
<div id="sec_two" class="sections"></div> 
 
<div id="sec_three" class="sections"></div>

Answer 3

重写了这一点，所以你没有计算你的JS中的每个单独的元素，你可以找到你动态滚动的哪个div，并修改匹配nav元素的类。

var $sections = $('.sections'), 
 
    $lis = $('nav li'); 
 

 
$(window).on('scroll', function(){ 
 
    var scrollPos = $(window).scrollTop(), 
 
     navHeight = $('nav').outerHeight(); 
 
    $sections.each(function() { 
 
    var top = $(this).offset().top, 
 
     bottom = top + $(this).outerHeight(); 
 
    if (scrollPos > top - navHeight && scrollPos < bottom) { 
 
     var $target = $lis.eq($(this).index() - 1); 
 
     $lis.not($target).removeClass('active'); 
 
     $target.addClass('active'); 
 
    } 
 
    }) 
 
});

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav{ 
 
    width: 100%; 
 
    background-color: black; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
nav ul{ 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
nav ul li{ 
 
    display: inline-block; 
 
} 
 

 
nav ul li a{ 
 
    font-size: 40px; 
 
    color: white; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
.sections{ 
 
    height: 200vh;; 
 
} 
 

 
#sec_one{ 
 
    background-color: blue; 
 
} 
 

 
#sec_two{ 
 
    background-color: red; 
 
} 
 

 
#sec_three{ 
 
    background-color: yellow; 
 
} 
 

 
.active{ 
 
    background-color: #666666; 
 
} 
 

 
p{ 
 
    color: white; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="" id="link_1">Link 1</a></li> 
 
    <li><a href="" id="link_2">Link 2</a></li> 
 
    <li><a href="" id="link_3">Link 3</a></li> 
 
    </ul> 
 
    <p></p> 
 
</nav> 
 

 
<div id="sec_one" class="sections"> 
 

 
</div> 
 

 
<div id="sec_two" class="sections"> 
 

 
</div> 
 

 
<div id="sec_three" class="sections"> 
 

 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Answer 4

所以，我假设你想要的链接，链接到不同的div在页面上，而不是一个完全不同的页面。

您可以使用ScrollSpy来轻松完成此操作。文档可以找到here。

下面是你会怎么做这是你的页面上的一些示例代码：

首先，引用scrollspy.js文件。请确保使用相对URL，具体取决于您选择保存文件的位置。

<script src="scrollspy.js"></script>

然后，在你的网页脚本文件，你可以有这样的事情。

$('.sections').on('scrollSpy:enter', function() { 
    switch($(this).attr('id')) { 
    case "sec_one": 
     $("#link_1").addClass("active"); 
     $("#link_2").removeClass("active"); 
     $("#link_3").removeClass("active"); 
     break; 
    case "sec_two": 
     $("#link_1").removeClass("active"); 
     $("#link_2").addClass("active"); 
     $("#link_3").removeClass("active"); 
     break; 
    case "sec_three": 
     $("#link_1").removeClass("active"); 
     $("#link_2").removeClass("active"); 
     $("#link_3").addClass("active"); 
     break; 
    } 
} 

$('.sections').scrollSpy();