ページの位置に応じてナビゲーションリンクの色を変更するには

Question

こんにちは私はスクロールのスクロールリンクがページ上の特定のセクションに到達したときに色を変える方法を工夫しています。現時点では、ナビゲーションリンクをクリックするとスクロールアニメーションがページの特定のセクションに移動し、リンクにアクティブなクラスが追加されるように設定されています（赤に変更）。私は、そのセクションがスクロールされたときにアクティブなリンクを赤色に変えるだけです。これは私の現在のマークアップです。

あなたは、スクロール上のウィンドウの現在の位置を確認する必要が

$("#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>

Answer 1

$(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>

Answer 2

ありがとうございます。位置によってあなたのリンクの色をアクティブにします。 セクションの高さは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'); 
     } 
     }); 
    }); 

Answer 3

$(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'); 
     } 
     }); 
    }); 

これは、トリックを行いますが、私はコーディングのこの種のを避けるために、将来のためにお勧めします。すべてのケースで機能する一般的な機能を作成する必要があります。たとえば、ここでセクションを1つ追加すると、スクリプトも変更する必要があります。