改變主動導航的部分下劃線

所以我有兩個問題，但解決了第一個。第一個是得到一個導航欄後粘一個給定的div（或在這種情況下div的高度）。無論如何，我現在的問題是如何讓導航鏈接加下劃線或改變顏色時，在活動部分。即如果我在第一部分上，導航欄上的第一個鏈接帶下劃線，當我向下滾動時，相應的鏈接和部分會發生同樣的情況。改變主動導航的部分下劃線

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 550) { 
     $('#nav_bar').addClass('navbar-fixed'); 
     } 
     if ($(window).scrollTop() < 551) { 
     $('#nav_bar').removeClass('navbar-fixed'); 
     } 
    }); 
    }); 
</script> 

<div id="page"> 
    <!--top section--> 
    <section id="first"> 
    <div class="top headline"><img src="" alt="Logo"></div> 
    <div class="top-with">with</div> 
    <div class="max-top"><img src="" alt="Logo"></div> 
    </section> 
</div> 

<!-- fixed nav-bar --> 
<div id='nav_wrapper'> 
    <nav id='nav_bar'> 
    <ul id='nav_links'> 
     <img src="" alt="max-logo"> 
     <li class="active"> 
     <li><a href="#first">1</a></li> 
     <li><a href="#second">2</a></li> 
     <li><a href="#third">3</a></li> 
     <li><a href="#fourth">4</a></li> 
     <li><a href="#fifth">5</a></li> 
     </li> 
    </ul> 
    </nav> 
</div>

來源

2013-10-31 Dr.Venkman

你能解釋一下嗎？也許是一個jsfiddle？ – ajc

我強烈建議你看看bootstrap css庫。所有這些都是爲你完成的。 –

喲應該給我們一個小提琴，以幫助你 –

我想我明白你想要做什麼，我最近纔有同樣的問題。

您需要比較$(document).scrollTop()與各節的$(section).offset().top。一旦獲得活動部分的ID，請使用相同的href查找<a>以應用某些高亮顯示。

$(document).scroll(function(){ 
    var st = $(this).scrollTop(); 

    $(section).each(function() { 
     if(st > $(this).offset().top && st <= $(this).offset().top + $(this).height()){      
      var id = $(this).attr('id'); 
      $('a[href="#'+id+'"]').addClass('active'); 
     }else{ 
      var id = $(this).attr('id'); 
      $('a[href="#'+id+'"]').removeClass('active'); 
     } 
    }); 

});

您可以檢查出我的fiddle

來源

2013-11-01 01:50:34

改變主動導航的部分下劃線

回答

相關問題