更改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添加类。