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
});

你可以利用偏移来搞定它。“

祝你好运！

带开关的粘性标头（如Hongkiat）

2 个答案: