我怎样才能让我的导航栏在到达它时粘在元素的底部？

Question

好的，我正在尝试让我的导航栏固定在页面顶部 25 像素高 header 的底部。我只希望我的导航栏在到达 header.

底部时保持不变（固定 — position: fixed）

我设置的CodePen的link可以在下面找到。对于您将看到的所有额外的 CSS 和 JavaScript/jQuery 内容，我深表歉意……不过，这些都是 site/design 的一部分。

当我的导航栏（位于屏幕底部）到达顶部 25px (black-ish) header 的底部时，我无法固定它屏幕。我已经尝试了来自不同地方的 10 多种解决方案，其中 none 对我有用....

Answer 1

试试这个脚本

$(function() {
    var offset = $("#navbar").offset(),
        topPadding = 15;

    $(window).scroll(function() {
        if ($("#sidebar").height() < $(window).height() && $(window).scrollTop() > offset.top) {
            $("#sidebar").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

Answer 2

您需要做的是在您的导航中添加一个 class，因为您的导航绝对位于 window 中，我们将找到 window 高度并减去您的导航和您拥有的顶部栏，然后从那里添加和删除 classes。以下将起作用：

$(window).on('scroll', function () {
  if ( $(window).scrollTop() >= $(window).height() - 105) {
    $( '#mainNav' ).addClass("scrolled");
  }else{
    $( '#mainNav' ).removeClass("scrolled");
  }
});

那么你的css

#mainNav.scrolled { /* This will only take place when the navbar reaches the set point on the page */
  position: fixed;
  z-index: 99;
  top:25px;
  left:0;
}

通常你会使用 $('div').offset().top 而不是 $(window).height() - 105 但你的导航绝对位于 window 而不是任何相对 div 这将导致不一致的结果所以我们将找到 windows 高度，然后减去导航和顶部栏的高度。现在，一旦导航栏滚动到顶部栏的底部，它就应该固定在正确的位置。这是一个工作代码笔 CodePen

Answer 3

有一个 nacent（在 Firefox、Safari 和 iOS6+ 中受支持；在 Chrome 中开发；在 Edge 中 "under consideration"；更多数据在 caniuse.com） CSS 属性可以这样实现：

position: sticky

还有一些 polyfill 可以模拟 position: sticky 在其他浏览器中的行为：

这些都比上面的几个 hand-rolled 建议可靠得多。

Answer 4

有效！像我在这里所做的那样，在 jquery 中添加 #landingHeaderWrapper 的高度 http://codepen.io/vishnu1212/pen/jWGwop
然后添加一个新的 class 位置属性 like

.sticky{ postion:fixed;}

使用 AddClass 和 removeClass 函数来切换此 class

我怎样才能让我的导航栏在到达它时粘在元素的底部？

How can I make my navbar stick to the bottom of an element upon reaching it?

javascript

jquery

html

css

sticky