Изменить стиль связи на основе текущего Div

Question

У меня есть одна страница HTML с навигационным меню с фиксированным положением с фиксированным положением со ссылками, которые приводят к разным разделам. Есть ли способ изменить цвет моих ссылок, когда пользователь достигнет соответствующего раздела (либо нажав ссылку или прокручивая ее до раздела)?

Это то, что мой HTML выглядит, в основном:

<div id="topNav"> 
    <ul> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="#web_design">Web Design</a></li> 
      <li><a href="#home">Home</a></li> 
    </ul> 
</div> 

<div id="home"> 
    <img src="images/dog.jpg" class="bg" /> 
</div> 
<div id="web_design"> 
    <img class="titleImage" src="images/web_design.jpg" /> 
</div> 
<div id="contact"> 
    <img class="titleImage" src="images/contact.jpg" /> 
</div> 

И это CSS:

#topNav { 
    width: 100%; 
    height: 60px; 
    position: fixed; 
    top: 20px; 
} 

Я хотел бы использовать класс «выбранные» для моего списка элементов и вероятно, примените его к той, какая ссылка соответствует текущему разделу пользователя, и сделайте что-нибудь вроде:

#topNav li.selected a { 
    color: #cbcacc; 
} 

Любой h elp очень ценится!

Answer 1

CSS3 имеет интересный селектор : цель, вы можете стилизовать ваши ссылки, основанные на цели, вы можете сделать что-то вроде этого

: мишень {цвет: # ff0000;}

Try Google для css3 целевой селектор

Answer 2

Я думаю, вам нужно изделие под названием scrollspy. Есть несколько бесплатных питания все полотно:

• This jsFiddle является Lightweight пример
• Some JQuery scrollspy плагин в jQuery plugin registry
• Bootstrap scrollspy Javascript плагин

Вы также можете Google с помощью ключевого слова scrollspy для получения дополнительной информации.

Это код из приведенного выше fillde:

JS

// Cache selectors 
var lastId, 
    topMenu = $("#top-menu"), 
    topMenuHeight = topMenu.outerHeight()+15, 
    // All list items 
    menuItems = topMenu.find("a"), 
    // Anchors corresponding to menu items 
    scrollItems = menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }); 

// Bind click handler to menu items 
// so we can get a fancy scroll animation 
menuItems.click(function(e){ 
    var href = $(this).attr("href"), 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
    $('html, body').stop().animate({ 
     scrollTop: offsetTop 
    }, 300); 
    e.preventDefault(); 
}); 

// Bind to scroll 
$(window).scroll(function(){ 
    // Get container scroll position 
    var fromTop = $(this).scrollTop()+topMenuHeight; 

    // Get id of current scroll item 
    var cur = scrollItems.map(function(){ 
    if ($(this).offset().top < fromTop) 
     return this; 
    }); 
    // Get the id of the current element 
    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 

    if (lastId !== id) { 
     lastId = id; 
     // Set/remove active class 
     menuItems 
     .parent().removeClass("active") 
     .end().filter("[href=#"+id+"]").parent().addClass("active"); 
    }     
}); 

HTML

<div id="topNav"> 
    <ul> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="#web_design">Web Design</a></li> 
      <li><a href="#home">Home</a></li> 
    </ul> 
</div> 
<div class="spacer"></div> 
<div id="home"> 
    <img src="images/dog.jpg" class="bg" /> 
</div> 
<div id="web_design"> 
    <img class="titleImage" src="images/web_design.jpg" /> 
</div> 
<div id="contact"> 
    <img class="titleImage" src="images/contact.jpg" /> 
</div> 

CSS

#topNav { 
    width: 100%; 
    height: 60px; 
    position: fixed; 
    top: 20px; 
} 

div.spacer { 
    height: 80px; 
} 

#topNav li.selected a { 
    color: #cbcacc; 
}