當滾動時將類添加到導航欄項目

Question

你好我正在創建一個頁面網站，所以我需要的，例如，如果section2出現在視口添加類活動鏈接與href =「section2」。

例我需要什麼one page website

$(document).ready(function() { 
 
    $(".links a").click(function (e) { 
 
     if (this.getAttribute("href").charAt(0) == "#") { 
 
      e.preventDefault(); 
 
      $(this).addClass("active").siblings().removeClass("active"); 
 
      $("html, body").stop(); 
 
      $("html, body").animate({ 
 
       scrollTop: $($(this).attr("href")).offset().top 
 
      }, 1400) 
 
     } 
 
     else { 
 
      $($(this)).attr("target", "_blank") 
 
     } 
 
    }) 
 
})

.links{ 
 
    width:600px; 
 
    position:fixed; 
 
    top:0; 
 
    padding:20px; 
 
} 
 
.links a{ 
 
    display:inline-block; 
 
    padding:10px 20px; 
 
    border:1px solid #02e62a; 
 
    color:#02e62a; 
 
    text-decoration:none; 
 
} 
 
.links a:hover, .links a.active{ 
 
    color:#fe0101; 
 
    border-color:#fe0101; 
 
} 
 
.section{ 
 
    width:400px; 
 
    height:200px; 
 
    margin:300px auto 600px; 
 
    background-color:#0094ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="links"> 
 
     <a href="#home">Section 1</a> 
 
     <a href="#about">Section 2</a> 
 
     <a href="http://google.com" target="_blank">External Link</a> 
 
     <a href="#services">Section 3</a> 
 
     <a href="#contact">Section 4</a> 
 
    </div> 
 
    <div id="home" class="section"></div> 
 
    <div id="about" class="section"></div> 
 
    <div id="services" class="section"></div> 
 
    <div id="contact" class="section"></div>

注：請不要推薦我使用任何插件。

Answer 1

試試這個，我認爲它提供了你想要的解決方案。

$(document).on("scroll", function() { 
    $('div[id^="section"]').each(function() { 
    var id = $(this).attr("id"); 
    if (isScrolledIntoView("#" + id)) { 
     $('a[href="#'+id+'"]').addClass("active").siblings().removeClass("active"); 
    } 
    }) 
}) 

注意似乎錯誤一點，當你用鼠標滾輪在這裏使用它，所以在正確的拉動滾動條測試。不知道爲什麼，但現在我試圖解決它。

更新這個問題似乎是，片段窗口是如此之小，如果你運行在full page的例子，那麼它工作得很好

$(document).ready(function() { 
 
    $(".links a").click(function(e) { 
 
    if (this.getAttribute("href").charAt(0) == "#") { 
 
     e.preventDefault(); 
 
     $(this).addClass("active").siblings().removeClass("active"); 
 
     $("html, body").stop(); 
 
     $("html, body").animate({ 
 
     scrollTop: $($(this).attr("href")).offset().top 
 
     }, 1400) 
 
    } else { 
 
     $($(this)).attr("target", "_blank") 
 
    } 
 
    }) 
 
}) 
 

 
$(document).on("scroll", function() { 
 
    $('div.section').each(function() { 
 
    var id = $(this).attr("id"); 
 
    if (isScrolledIntoView("#" + id)) { 
 
     $('a[href="#'+id+'"]').addClass("active").siblings().removeClass("active"); 
 
    } 
 
    }) 
 
}) 
 

 
function isScrolledIntoView(elem) { 
 
    var docViewTop = $(window).scrollTop(); 
 
    var docViewBottom = docViewTop + $(window).height(); 
 

 
    var elemTop = $(elem).offset().top; 
 
    var elemBottom = elemTop + $(elem).height(); 
 

 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
 
}

.links { 
 
    width: 600px; 
 
    position: fixed; 
 
    top: 0; 
 
    padding: 20px; 
 
} 
 

 
.links a { 
 
    display: inline-block; 
 
    padding: 10px 20px; 
 
    border: 1px solid #02e62a; 
 
    color: #02e62a; 
 
    text-decoration: none; 
 
} 
 

 
.links a:hover, 
 
.links a.active { 
 
    color: #fe0101; 
 
    border-color: #fe0101; 
 
} 
 

 
.section { 
 
    width: 400px; 
 
    height: 200px; 
 
    margin: 300px auto 600px; 
 
    background-color: #0094ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="links"> 
 
    <a href="#Home">Home</a> 
 
    <a href="#About">About</a> 
 
    <a href="http://google.com" target="_blank">External Link</a> 
 
    <a href="#Contact">Contact</a> 
 
    <a href="#Blog">Blog</a> 
 
</div> 
 
<div id="Home" class="section"></div> 
 
<div id="About" class="section"></div> 
 
<div id="Contact" class="section"></div> 
 
<div id="Blog" class="section"></div>