根據滾動位置突出顯示鏈接

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();