jquery-waypoints - 带有开关的粘性标题（如 Hongkiat）

Question

我在本教程http://www.webtutorialplus.com/sticky-header-on-scroll-jquery/中使用航点创建粘性标题

但是如何创建一个“交换”的标题？

示例：如果您访问http://www.hongkiat.com/blog/并向下滚动滚动的标题，实际上并不是页面上最初可见的元素。

Answer 1

这是你要找的吗？

工作演示

$('.showafterthis').waypoint(function() {
  if ($(".header2").is(":hidden")) {
    $(".header2").slideDown(100);
  } else {
        $(".header2").slideUp(100);
    }
});

Answer 2

它们实际上是两个独立的导航。酒吧。

我会创建另一个并通过将其移出屏幕顶部来隐藏它。当然，将它放在具有相对位置的任何内部 html 之外。

<div id="nav2">Your links and jazz</div>

在 CSS 中：

#nav2 { style:your; bar:!; }
.sticky-wrapper { position:absolute; top:-50px;  }

粘性包装线非常重要。这是导航栏周围的 div，这是获取定位的行，而不是 nav2 行。

对于您的 JavaScript：

$('#nav2').waypoint('sticky', {
    offset: -300 // how far from top
});

您可以使用偏移量来获得所需的位置。

祝你好运！