スクロール位置に基づくリンクの強調表示

Question

ユーザーがそのリンクのページをスクロールしている場合にハイライト表示させようとしています。しかし何らかの理由でそれが正しく動作していません。私はjqueryで私の最初の試行をコメントアウトして、もう一度試しましたが、リンク2が強調されています。

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