간단한 scrollspy 효과 JQuery와

Question

, 초보자 질문입니다. 기본적으로, 나는 해당 섹션으로 스크롤 할 때 내 링크가 붉은 색이 될 필요가 있습니다. 나는 이미 온라인에서 몇 가지 예제를 찾아 보았지만 실제로 시도한 것은 하나도 없었고 JS는 어리석은 편이었다.

누구든지 여기에 도울 수 있습니까? 당신의 시간을 https://jsfiddle.net/Tiph/v6vtczwe/

Tahnk 당신이 너무 많이 도움 : 여기

내가 지금까지 가지고있는 전체 JSFiddle입니다!

$(document).ready(function(){ 


    //SMOOTHSCROLL 
    $('.nav-top a, .scrollDown').click(function(){ 
     $('html, body').animate({ 
     scrollTop: $($(this).attr('href')) 
     .offset().top 
     }, 700); 
     return false; 
    }); 

}); 

$(window).scroll(function(){ 
    var $window =$(window); 
    var scroll_top = $(window).scrollTop(); 
    console.log($(window).scrollTop()); 
    var position = $("section").offset().top; 
    var news = $("#newsSection").offset().top; 
    var shows = $("#showsSection").offset().top; 

if (scroll_top >= news) { 
      $('.news').addClass("selected"); 
      } 
if (scroll_top >= shows) { 
      $('.shows').addClass("selected"); 
      } 

}); 

Answer 1

$('.nav-top a, .scrollDown').click(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $($(this).attr('href')) 
 
     .offset().top 
 
    }, 700); 
 
    return false; 
 
}); 
 

 
$(window).scroll(function() { 
 
    var x = $(".nav-top").offset().top; 
 
    $("section").each(function(index) { 
 
    var z = $(this).attr("id"); 
 
    if (x > $(this).offset().top && x <= $(this).offset().top + $(this).height()) { 
 
     $('a.' + z).css("color", "red"); 
 
    } else { 
 
     $('a.' + z).css("color", "gray") 
 
    } 
 
    }) 
 
})

.menu > nav { 
 
    height: 50px; 
 
    position: fixed; 
 
    bottom: 0%; 
 
    width: 100%; 
 
    background-color: #393838; 
 
    opacity: 1; 
 
    padding-left: 70px; 
 
} 
 
.selected { 
 
    color: red 
 
} 
 
.nav-top { 
 
    padding: 15px 0; 
 
    background: rgb(034, 034, 034); 
 
    position: relative; 
 
    z-index: 900; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    position: relative; 
 
} 
 
.nav-top a { 
 
    color: white; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-family: 'Oswald'; 
 
    font-size: 30px; 
 
    letter-spacing: 2px; 
 
    line-height: 55px; 
 
    margin-right: 30px; 
 
    transition: .6s all ease-in-out; 
 
} 
 
.nav-top a:hover { 
 
    color: #de031d; 
 
    transition: .3s all ease-in-out; 
 
} 
 
.section { 
 
    height: 600px; 
 
} 
 
.grey { 
 
    background-color: grey; 
 
} 
 
.darkGrey { 
 
    background-color: darkgrey; 
 
} 
 
a.newsSection{ 
 
color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <nav class="nav-top"> 
 
    <a class="newsSection" href="#newsSection">News</a> 
 
    <a class="showsSection" href="#showsSection">Shows</a> 
 
    <a class="musicSection" href="#musicSection">Discographie</a> 
 
    <a class="mediaSection" href="#mediaSection">Medias</a> 
 
    <a class="bioSection" href="#bioSection">Bio</a> 
 
    </nav> 
 
</div> 
 
<section id="newsSection" class="section grey"> 
 
    first section 
 
</section> 
 
<section id="showsSection" class="section darkGrey"> 
 
    second section 
 
</section> 
 
<section id="musicSection" class="section grey"> 
 
    third section 
 
</section> 
 
<section id="mediaSection" class="section darkGrey"> 
 
    fourth section 
 
</section> 
 
<section id="bioSection" class="section grey"> 
 
    fifth section 
 
</section>