在滚动上动态定位元素

Question

目标

最初加载时，页面导航位于页面下方。所以它看起来如下图所示。

背景

我创建了一个使用Headroom.js来控制其位置的导航元素。该库的要点是，当用户向下滚动时，它会将所需的导航项移出视图，以便您可以看到更多内容。然后，当您向上滚动以便于点击链接时，如果您需要这样做，则会显示该项目。

当前状态

我现在有demo on codepen。

该导航项位于页面顶部，但位于较低的z-index。所以最初不可见。

<小时/>

---

向下滚动时，元素不在视野范围内。

<小时/>

---

但是当你向上滚动时，它就是它需要的地方

<小时/>

---

代码

HTML

<nav id="page-menu" class="link-header header--fixed slide slide--reset" role="banner">
  <ul>
    <li><a href="#">Products</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Cases</a></li>
  </ul>
</nav> 

CSS

#page-menu {
  background-color: #BA222B;
  list-style-type: none;
  width: 100%;
  z-index:10;
}

#page-menu ul { 
  list-style-type: none;
  margin: 0;
  position: absolute;
  bottom: 5px;
  right: 10px;
}

#page-menu ul li {
  display: inline-block;
  margin-left: 10px;
}

#page-menu ul li a {
  text-decoration: none;
  color: #fff;
}

.link-header { 
  background-color:#292f36;
  height: 100px; 
}

.header--fixed {
  position:fixed;
  z-index:10;
  right:0;
  left:0;
  top:0px;
}

的jQuery

(function() {
  new Headroom(document.querySelector("#page-menu"), {
    tolerance: 5,
    offset : 150,
    classes: {
      initial: "slide",
      pinned: "slide--reset",
      unpinned: "slide--up"
    }
  }).init();
}());

codepen上的完整演示。

Answer 1

目标：

根据您的描述，您希望阅读导航在页面加载时显示：

当用户滚动时，用灰色条移动，然后向下移动，直到它的截止点到达灰色条的底部。然后你想让事情进入，让红色条向上滑动并离开视野，然后根据滚动向上和向下滑动。您希望转换顺利进行。

---

方法：

要平稳过渡要记住的事情是你有两种状态：顶级状态和底部状态。你必须设计两者，你必须弄清楚要改变的确切高度，你必须确保它们在那个位置是相同的，所以看起来是无缝的。

最高州：

我们在这里不需要任何额外的定位。我们希望它实际上是static，听起来很奇怪。

底部状态：

我们希望此处fixed定位。由于我们希望在红色条触及窗口顶部时发生转换，因此fixed-header中的CSS已经完美了。

转换高度：

标题和灰色导航栏合计为180px，因此该数字将是我们的转换。

---

代码：

1。 Statechange

让我们向后工作并首先进行状态更改。您需要在很多地方从150px更改为180px。例如，您的JS代码：

现有的JS：

if ($(window).scrollTop() >= 150) {

...

(function() {
    new Headroom(document.querySelector("#page-menu"), {
        tolerance: 5,
        offset : 150,

新JS：

if ($(window).scrollTop() >= 180) {

...

(function() {
    new Headroom(document.querySelector("#page-menu"), {
        tolerance: 5,
        offset : 180,

您的header需要更新height，或完全删除height。

现有的CSS：

header {
    height:150px;
    position: relative;
    z-index:30;
}

新CSS：

header {
    position: relative;
    z-index:30;
}

2。最高州

在这里弄乱你的一件大事是，由于某种原因，你正在使用的库在页面加载时应用.header--fixed和link-header。我不知道如何防止这种情况，但我们可以通过从CSS中删除它们来中和。

删除此CSS：

.link-header { 
    background-color:#292f36; 
    height: 100px;
}
.header--fixed {
    position:fixed;
    z-index:10;
    right:0;
    left:0;
    top:0px;
}

其次，我们需要调整红色ul内的nav。

现有的CSS：

#page-menu ul { 
    list-style-type: none;
    margin: 0;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

新CSS：

#page-menu ul { 
    list-style-type: none;
    margin: 0 auto;
    padding:0;
    width:960px;
    max-width:100%;
    text-align:right;
}

3。底部状态

除了fixed-header课程也被添加到灰色nav之外，其他所有内容都很有效。我们需要调整我们的jQuery选择器位。

现有的JS：

if ($(window).scrollTop() >= 180) {
    $('nav#page-menu').addClass('fixed-header');
}
else {
    $('nav#page-menu').removeClass('fixed-header');
}

NewJS：

if ($(window).scrollTop() >= 180) {
    $('header nav').addClass('fixed-header');
}
else {
    $('header nav').removeClass('fixed-header');
}

4。杂项清理

这里的一切看起来都很不错，只是我们两个li内的nav不排成一行。我们需要修复一些margin-right以使它们排成一行。

现有的CSS：

#page-menu ul li {
    display: inline-block;
    margin-left: 10px;
}

新CSS：

#page-menu ul li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

最后，我注意到您的HTML中有一个缺少的右括号，灰色nav。它没有太大的伤害，但它可以：

<nav>
    <ul>
        <li><a href="/dentist/">Dentists</a></li>
        <li><a href="/lab/">Labs</a></li>
        <li><a href="/patient/">Patients</a></li>
    <ul>  <--- ( Should be </ul> )
</nav>

结束结果：

http://codepen.io/anon/pen/qIrhx