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。＃menu-scroll？

Answer 1

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

$(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添加类。

当关注div改变时改变css

2 个答案: