更改CSS時，重點div更改

Question

我不知道這是否可能。我創建一個單頁面佈局的網站，並在家庭部分，我有一個菜單

<nav> 
    <ul id="navigation"> 
     <li><a href="#1" title="1">1</a></li> 
     <li><a href="#2" title="2">2</a></li> 
     <li><a href="#3" title="3">3</a></li> 
     <li><a href="#4" title="4">4</a></li> 
     <li><a href="#5" title="5">5</a></li> 
    </ul> 
</nav> 

這是擺內<section id="home"></section>。

如果#home失去焦點，是否可以在該菜單上使用不同的佈局，即查看另一個部分，fx #3。在主頁部分，菜單放置在底部，但我希望它固定在頂部，並在用戶向下滾動或單擊鏈接時更改佈局。或者我將不得不創建另一個菜單f.x. ＃菜單滾動？

Answer 1

請注意，滾動到文檔的另一部分時，焦點（具有：焦點選擇器的鏈接或控件）不會更改。來處理，可以考慮使用jQuery「滾動」事件：

$(window).scroll(function() { 
    if ($(window).scrollTop < $("#home").offset().top) { 
     $("#navigation").removeClass("scrolledDown").addClass("scrolledUp"); 
    } else { 
     $("#navigation").removeClass("scrolledUp").addClass("scrolledDown"); 
    } 
}); 

這可以很容易地擴展到幾個部分。請注意，滾動事件被激發了很多，所以不要在這個處理程序中做太多事情。

Answer 2

您可以使用:focus選擇器。

當目標是focussed或blurred時，您也可以嘗試使用jQuery添加類。