Question

好的，我试图让我的导航栏贴在我页面顶部25px高标题的底部。我只希望我的导航栏在到达该标题的底部时粘住（变为固定 - position: fixed）。

可以在下面找到我设置的CodePen的链接。对于您将看到的所有额外的CSS和JavaScript / jQuery内容，我深表歉意......尽管如此，它仍然是网站/设计的所有部分。

当我的导航栏（位于屏幕底部）到达屏幕顶部25px（黑色）标题的底部时，我无法修复它。我已经尝试过来自不同地方的10多个解决方案，而且没有人为我做过这个伎俩......

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

你需要做的是首先在你的导航中添加一个类，因为你的导航器绝对定位在窗口中，我们会找到窗口高度减去导航和顶部栏，然后添加和删除类从那里。以下内容适用：

$(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但你的导航绝对定位在窗口中而不是任何相对div会导致不一致的结果，所以我们会找到窗口高度然后减去导航高度和顶部栏。现在，一旦滚动到顶部栏的底部，导航器应固定在正确的位置。这是一个有效的代码集CodePen

Answer 3

有一个相邻的（在Firefox，Safari和iOS6 +支持;在Chrome开发中;＆＃34;正在考虑＆＃34;在Edge中;更多数据在caniuse.com）CSS属性可以实现此目的：

position: sticky

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

这些都比上面提到的少数手动建议更加强大。

Answer 4

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

.sticky{ postion:fixed;}

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

如何在到达时将导航栏固定在元素的底部？

4 个答案: