如何根據頁面位置更改導航鏈接顏色

嗨我正在嘗試解決如何讓我的粘滯導航鏈接在滾動時更改頁面上特定部分的顏色。目前，我已經設置好了，當導航鏈接被點擊時，滾動動畫會將您帶到頁面上的特定部分，併爲鏈接添加一個活動類（更改爲紅色）。當它的部分滾動到時，我只想將活動鏈接更改爲紅色。這是我目前的標記。如何根據頁面位置更改導航鏈接顏色

謝謝

$("#nav-item-1").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#section1").offset().top 
 
    }, 2000); 
 
    }); 
 
    $("#nav-item-2").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#section2").offset().top 
 
    }, 2000); 
 
    }); 
 
    $("#nav-item-3").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#section3").offset().top 
 
    }, 2000); 
 
    }); 
 
    $("#nav-item-4").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#section4").offset().top 
 
    }, 2000); 
 
    }); 
 

 
    $("#nav-item-1").click(function() { 
 
    $("a").removeClass('active'); 
 
    $("#nav-item-1").addClass('active'); 
 
    }); 
 
    $("#nav-item-2").click(function() { 
 
    $("a").removeClass('active'); 
 
    $("#nav-item-2").addClass('active'); 
 
    }); 
 
    $("#nav-item-3").click(function() { 
 
    $("a").removeClass('active'); 
 
    $("#nav-item-3").addClass('active'); 
 
    }); 
 
    $("#nav-item-4").click(function() { 
 
    $("a").removeClass('active'); 
 
    $("#nav-item-4").addClass('active'); 
 
    });

* { 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 
    
 
    .active { 
 
     color: red; 
 
    } 
 
    
 
    .container { 
 
     width: 800px; 
 
    } 
 
    
 
    a { 
 
     text-decoration: none; 
 
     color: inherit; 
 
    } 
 
    
 
    section { 
 
     padding: 200px 0; 
 
     width: 100%; 
 
     text-align: center; 
 
     font-size: 35px; 
 
    } 
 
    
 
    #section1 { 
 
     background: #fafafa; 
 
    } 
 
    
 
    #section2 { 
 
     background: #e2e2e2; 
 
    } 
 
    
 
    #section3 { 
 
     background: #c9c9c9; 
 
    } 
 
    
 
    #section4 { 
 
     background: #d4d4d4; 
 
    } 
 
    
 
    nav { 
 
     position: fixed; 
 
     text-align: center; 
 
     width: 100%; 
 
     background: black; 
 
     padding: 25px 0; 
 
    } 
 
    
 
    nav ul { 
 
     list-style: none; 
 
     text-align: center; 
 
    } 
 
    
 
    nav ul li { 
 
     display: inline-block; 
 
     margin-right: 40px; 
 
     color: #fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#" id="nav-item-1" class="active">section1</a></li> 
 
     <li><a href="#" id="nav-item-2">section2</a></li> 
 
     <li><a href="#" id="nav-item-3">section3</a></li> 
 
     <li><a href="#" id="nav-item-4">section4</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 

 

 
    <section id="section1">Section 1</section> 
 
    <section id="section2">Section 2</section> 
 
    <section id="section3">Section 3</section> 
 
    <section id="section4">Section 4</section>

來源

2017-04-11 rufus

這可能是你在找什麼：在JQuery的測試元素是否在屏幕的頂部（http://stackoverflow.com/a/7543724/4204026 ）。 –

$(document).ready(function(){ 
 
    $(".nav-item").click(function() { 
 
     $("a.active").removeClass('active'); 
 
     $(this).addClass('active'); 
 
     var active_section = $(this).attr('href'); //get active section id 
 
     $('html, body').animate({ 
 
     //and scroll to the section 
 
     scrollTop: $(active_section).offset().top 
 
     }, 1000); 
 
    }); 
 
    
 
    
 
    $(document).scroll(function() { 
 
    //get document scroll position 
 
    var position = $(document).scrollTop(); 
 
    //get header height 
 
    var header = $('nav').outerHeight(); 
 
     
 
    //check active section 
 
    $('.section').each(function(i) { 
 
     if($(this).position().top <= (position + header)) 
 
      { 
 
       $("a.active").removeClass('active'); 
 
       $("a").eq(i).addClass('active'); 
 
      } 
 
     }); 
 
    }); 
 
    
 
});

* { 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 
    
 
    .active { 
 
     color: red; 
 
    } 
 
    
 
    .container { 
 
     width: 800px; 
 
    } 
 
    
 
    a { 
 
     text-decoration: none; 
 
     color: inherit; 
 
    } 
 
    
 
    section { 
 
     padding: 200px 0; 
 
     width: 100%; 
 
     text-align: center; 
 
     font-size: 35px; 
 
    } 
 
    
 
    #section1 { 
 
     background: #fafafa; 
 
    } 
 
    
 
    #section2 { 
 
     background: #e2e2e2; 
 
    } 
 
    
 
    #section3 { 
 
     background: #c9c9c9; 
 
    } 
 
    
 
    #section4 { 
 
     background: #d4d4d4; 
 
    } 
 
    
 
    nav { 
 
     position: fixed; 
 
     text-align: center; 
 
     width: 100%; 
 
     background: black; 
 
     padding: 25px 0; 
 
    } 
 
    
 
    nav ul { 
 
     list-style: none; 
 
     text-align: center; 
 
    } 
 
    
 
    nav ul li { 
 
     display: inline-block; 
 
     margin-right: 40px; 
 
     color: #fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#section1" id="nav-item-1" class="nav-item active">section1</a></li> 
 
     <li><a href="#section2" id="nav-item-2" class="nav-item">section2</a></li> 
 
     <li><a href="#section3" id="nav-item-3" class="nav-item">section3</a></li> 
 
     <li><a href="#section4" id="nav-item-4" class="nav-item">section4</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 

 

 
    <section id="section1" class="section">Section 1</section> 
 
    <section id="section2" class="section">Section 2</section> 
 
    <section id="section3" class="section">Section 3</section> 
 
    <section id="section4" class="section">Section 4</section>

來源

2017-04-11 14:36:34

非常感謝您的幫助 – rufus

您需要檢查的滾動窗口的當前位置。按位置激活您的鏈接顏色。希望你的部分高度爲440px。如果你願意，你可以讓它變成動態的，而不是在每個if條件下寫440px。

https://jsfiddle.net/Lsxht5bs/3/

$(document).ready(function(){ 
    $(window).scroll(function (event) { 
     var scroll = $(window).scrollTop(); 
     if(scroll < 440){ 
     $("a").removeClass('active'); 
     $("#nav-item-1").addClass('active'); 
     } 
     else if(scroll > 440 && scroll < 880){ 
     $("a").removeClass('active'); 
     $("#nav-item-2").addClass('active'); 
     } 
     else if(scroll > 880 && scroll < 1320){ 
     $("a").removeClass('active'); 
     $("#nav-item-3").addClass('active'); 
     } 
     else if(scroll >= 1320){ 
     $("a").removeClass('active'); 
     $("#nav-item-4").addClass('active'); 
     } 
     }); 
    });

來源

2017-04-11 13:07:37

$(document).ready(function(){ 
    $(window).scroll(function (event) { 
     var top = $(window).scrollTop(); 
     var divH1 = $('#section1').outerHeight() - $('nav').outerHeight(); 
     var divH2 = divH1; 
     var divH3 = divH2 + $('#section3').outerHeight(); 
     var divH4 = divH3 + $('#section4').outerHeight(); 
     if(top < divH1){ 
     $("a").removeClass('active'); 
     $("#nav-item-1").addClass('active'); 
     } 
     if(top >= divH2){ 
     $("a").removeClass('active'); 
     $("#nav-item-2").addClass('active'); 
     } 
     if(top >= divH3){ 
     $("a").removeClass('active'); 
     $("#nav-item-3").addClass('active'); 
     } 
     if(top >= divH4){ 
     $("a").removeClass('active'); 
     $("#nav-item-4").addClass('active'); 
     } 
     }); 
    });

這將這樣的伎倆，但我建議今後避免這種編碼。你應該制定適用於所有情況的一般功能。例如，在這裏，如果您再添加一個節，您將不得不更改腳本。

來源

2017-04-11 14:03:59 Vladut

如何根據頁面位置更改導航鏈接顏色

回答

相關問題