0

我不知道这是否可能。我正在创建一个单页布局网站，在主页部分我有一个菜单

<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。在主页部分，菜单位于底部，但我希望它固定在顶部并在用户向下滚动或单击链接时更改布局。

还是我必须创建另一个菜单 fx #menu-scroll ？

4

2 回答 2

1

请注意，当您滚动到文档的另一部分时，焦点（具有 :focus 选择器的链接或控件）不会改变。要处理这个问题，请考虑使用 jquery "scroll" 事件：

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

这可以很容易地扩展到几个部分。请注意，滚动事件被触发了很多，所以不要在这个处理程序中做太多。

于 2013-07-19T18:26:11.487 回答
0

您可以使用:focus选择器。

您还可以尝试在目标集中或模糊时使用 jQuery 添加类。

于 2013-07-19T14:45:58.810 回答