簡單scrollspy效果的jQuery

對不起提前，初學者的問題在這裏:-)簡單scrollspy效果的jQuery

我想實現我的導航一scrollspy效果。基本上，我只需要當我滾動到相應的部分時，我的鏈接就會變成紅色。我已經看了一下，發現了一些在線的例子，但是我試過的東西實際上並沒有解決，而且我的JS也是草率的。

任何人都可以幫忙嗎？

這裏是滿的jsfiddle我到目前爲止： https://jsfiddle.net/Tiph/v6vtczwe/

Tahnk你這麼多的時間和幫助！

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

});

來源

2016-07-27 TiphG

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

來源

2016-07-27 10:03:58

簡單scrollspy效果的jQuery

回答

相關問題