粘性导航使标题跳转答案

【问题标题】：Sticky nav makes header jump粘性导航使标题跳转
【发布时间】：2014-03-11 12:03:11
【问题描述】：

我正在使用粘性导航，当我滚动标题时似乎会跳起来，而且不流畅。

可能是 CSS 问题？还是JS？

使用的JS：

var win      = $(window),
    fxel     = $('nav'),
    eloffset = fxel.offset().top;

    win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
    });

【问题讨论】：

这是边距...但是您是否想要边距？如果您保留边距，您也必须在 .fixed 类上设置它。缺点是您看到您的内容在顶部传递..（但也有解决这些问题的方法:)）

标签： jquery nav sticky

【解决方案1】：

删除html 和body 的边距/填充，并删除#container 的margin-top：

body, html{
    margin:0px;
    padding:0px;
}

#container {
  /*margin-top:10px;*/
}

查看demo，我可能误解了你的问题！

【讨论】：

【解决方案2】：

问题在于，当标题被指定为固定位置时，标题的高度超出了其余元素，因此它会跳到文档的顶部。我更改了您的一些 CSS，以便标题是绝对的，并且内容从顶部有一个边距。见：http://jsfiddle.net/FZpf7/2/，你会看到跳跃消失了。

更改的 CSS：

nav {
  background-color:#FBFBFB;
  color:white;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
}

div.header_med { 
 margin-top:  95px;
}

编辑：这是第二个 JSFiddle 链接http://jsfiddle.net/FZpf7/3/

【讨论】：

几分钟前刚刚找到相同的解决方案！谢谢！无论如何，我发现它只是将 .fixed 样式添加到 .header 类。反正是对的吗？
问题是，我不知道你想用粘性导航做什么。有时人们希望在滚动几个像素后修复它们，这就是为什么我保持你的代码完整并尝试用 CSS 修复它。但是要回答您的问题：是的，当导航必须始终保持粘性时，您最好立即将其设置为固定。这样，您可以删除在滚动期间将其设置为固定的 javascript。
首先，第一个解决方案是在滚动 20 像素后使其具有粘性，但发现这会给我带来比解决方案更多的问题。并且注重可用性，两者都是很好的解决方案，所以我只选择了一个会给我带来更少麻烦的解决方案。
好吧，如果这是你的第一个愿望（20px 滚动而不是粘性），你应该坚持（y）那个嘿嘿嘿。在我的回答中，您会找到第二个 JSFiddle 链接，我更改了一些内容，因此您必须滚动 20 像素才能获得粘性导航。
太棒了，我来看看你在css上做了什么改变