Jquery 滚动时固定的元素

我目前正试图让subnav坚持当滚动到某个位置。但当它到达那个位置时，它下面的所有东西都向上移动。我不太明白那是什么。可能很简单，但我就是看不到。谢谢你的帮助

CSS

HTML

内容

内容
内容
$（文档）.ready（函数（）{
var top=$（'subnav'）.offset（）.top-parseFloat（$（'subnav'）.css（'marginTop'）.replace（/auto/，0））；
$（窗口）。滚动（功能（事件）{
//卷轴的y位置是什么
var y=$（this.scrollTop（）；
//是否在表格下方
如果（y>=顶部）{
//如果是的话，请选择固定类别
$（'#subnav'）.addClass（'fixed'）；
}否则{
//否则，请将其移除
$（'#subnav'）.removeClass（'fixed'）；
}
});
});

其余部分向上移动是因为您将#subnav从内联流中移除。

其余部分向上移动是因为您将#subnav从内联流中移除。

我知道这个问题是在1.5年前提出的，但无论如何我都会回答，以防它能帮助将来的人

我最近在一个网站上工作时遇到了同样的问题。正如Daniel所说，它会跳起来，因为您正在从流中删除

#subnav

，这就是将位置设置为“固定”所做的。它本质上是在做同样的事情，就像你要完全删除你的

#subnav

元素一样：跳起来填补空白

为了解决这个问题，当滚动到固定位置时，我创建了一个具有相同尺寸、填充、边距等的新div，基本上是“填充”，而

#subnav

是固定的。有几种方法可以做到这一点：使用不同的ID创建一个重复的隐藏div，在添加/删除“fixed”类时显示/隐藏该div，或者使用JS动态创建一个隐藏div。无论您选择的修复方法是什么，这都将防止跳转问题

例如：

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y >= top) {
      $('#subnav').addClass('fixed')
        .after("<div id='filler'></div>");    // Add the new "filler" div

      // Make the height, width, padding-top, padding-bottom, margin-top, and
      // margin-bottom the same as the #subnav
      $('#filler')
          .css("height", $('#subnav').css("height"))
          .css("width", $('#subnav').css("width"));    // etc

    } else {
      $('#subnav').removeClass('fixed');

      // Remove the filler
      $('#filler').remove();    // Or you can hide and show it again as needed
    }
});

$（窗口）。滚动（函数（事件）{
var y=$（this.scrollTop（）；
如果（y>=顶部）{
$（'#subnav'）.addClass（'fixed'））
.after（“”；//添加新的“filler”div
//使高度、宽度、填充顶部、填充底部、边距顶部和
//边距底部与#subnav相同
$（“#填充物”）
.css（“高度”，$（“#subnav”）.css（“高度”）
.css（“宽度”），$（'#subnav'）.css（“宽度”）；//等
}否则{
$（'#subnav'）.removeClass（'fixed'）；
//卸下填料
$（'#filler'）.remove（）；//或者您可以根据需要隐藏并再次显示它
}
});

---

希望这有帮助。干杯

我知道这个问题是在1.5年前提出来的，但我还是会回答，以防它对将来的人有所帮助

我最近在一个网站上工作时遇到了同样的问题。正如Daniel所说，它会跳起来，因为您正在从流中删除

#subnav

，这就是将位置设置为“固定”所做的。它本质上是在做同样的事情，就像你要完全删除你的

#subnav

元素一样：跳起来填补空白

为了解决这个问题，当滚动到固定位置时，我创建了一个具有相同尺寸、填充、边距等的新div，基本上是“填充”，而

#subnav

是固定的。有几种方法可以做到这一点：使用不同的ID创建一个重复的隐藏div，在添加/删除“fixed”类时显示/隐藏该div，或者使用JS动态创建一个隐藏div。无论您选择的修复方法是什么，这都将防止跳转问题

例如：

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y >= top) {
      $('#subnav').addClass('fixed')
        .after("<div id='filler'></div>");    // Add the new "filler" div

      // Make the height, width, padding-top, padding-bottom, margin-top, and
      // margin-bottom the same as the #subnav
      $('#filler')
          .css("height", $('#subnav').css("height"))
          .css("width", $('#subnav').css("width"));    // etc

    } else {
      $('#subnav').removeClass('fixed');

      // Remove the filler
      $('#filler').remove();    // Or you can hide and show it again as needed
    }
});

$（窗口）。滚动（函数（事件）{
var y=$（this.scrollTop（）；
如果（y>=顶部）{
$（'#subnav'）.addClass（'fixed'））
.after（“”；//添加新的“filler”div
//使高度、宽度、填充顶部、填充底部、边距顶部和
//边距底部与#subnav相同
$（“#填充物”）
.css（“高度”，$（“#subnav”）.css（“高度”）
.css（“宽度”），$（'#subnav'）.css（“宽度”）；//等
}否则{
$（'#subnav'）.removeClass（'fixed'）；
//卸下填料
$（'#filler'）.remove（）；//或者您可以根据需要隐藏并再次显示它
}
});

---

希望这有帮助。干杯

你是说当滚动条从

static

定位到

fixed

定位时，内容似乎会“跳跃”起来？你需要为底部的停靠设置一个自定义类，至少这是我正在使用的，如果它不在顶部，也不固定，添加此页边距顶部并使其固定在页脚上。你是说当滚动条从

静态
定位到
固定
定位时，内容似乎会“跳”上去吗？你需要为底部的固定设置自定义类，至少这是我正在使用的，如果它不在顶部且不固定，将此页边距添加到页脚顶部并使其停靠在页脚上。
$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y >= top) {
      $('#subnav').addClass('fixed')
        .after("<div id='filler'></div>");    // Add the new "filler" div

      // Make the height, width, padding-top, padding-bottom, margin-top, and
      // margin-bottom the same as the #subnav
      $('#filler')
          .css("height", $('#subnav').css("height"))
          .css("width", $('#subnav').css("width"));    // etc

    } else {
      $('#subnav').removeClass('fixed');

      // Remove the filler
      $('#filler').remove();    // Or you can hide and show it again as needed
    }
});