Jquery 当粘性收割台激活时，绝对位置元素跳转

我正在创建一个粘性导航标题。跟随标题是一个主图像，图像上有一个表，具有绝对位置。粘性导航标题工作正常，但当我滚动窗口时，表格跳出图像

代码如下：

HTML

CSS

请帮忙。谢谢

您可以通过一个元素（

div#内包装器

）包装

#主img

和

#表

）

当元素

#main nav

变为粘性/固定时，它将从正常文档流中删除。这意味着

#main img

元素不考虑它，它被移动到下面

一个简单的解决方法是在

#主导航

元素粘滞时将其替换。您不需要更改HTML

---

当

#main-nav

元素具有类

.sticky

时，选择器

#main-nav.sticky~#main img

将选择后续的

#main img

同级元素

JavaScript不是必需的

小提琴：

只需对CSS进行一些更改（并获得平滑的滚动）

添加位置：固定位置

#main-nav { 
  width:100%;
  height: 50px;
  background: #ee3e64;
  z-index:9999;
  position: fixed;
}

添加填充顶部：50px

.inner-wrapper
{
  position: relative;
  padding-top: 50px;
}

#table{
  display:block;
  height:200px;
  width:80px;
  position:absolute;
  top:0;
  right:0;
  background:#0FB2F4;
  padding-top: 50px;
}

---

这并不能完全解决问题。它不能平稳地向下滚动。尝试向下滚动5px，您会注意到元素反弹了。把你的例子和我的相比……这是一个我没想到的解决问题的简单方法。谢谢。也谢谢Josh Crozier，谢谢你的详细回答。一个简单的css行使滚动更加平滑。太棒了！这对我来说比较容易。谢谢

#main-nav { 
  width:100%;
  height: 50px;
  background: #ee3e64;
  z-index:9999;
}

#main-img {
  height:200px;
  width:100%;
  background:#A57BF6;
}

#table{
  display:block;
  height:200px;
  width:80px;
  position:absolute;
  top:50px;
  right:0;
  background:#0FB2F4;
}

.sticky{
  position:fixed;
  top:0;
}

#main-nav.sticky ~ #main-img {
  margin-top: 50px;
}

#main-nav { 
  width:100%;
  height: 50px;
  background: #ee3e64;
  z-index:9999;
  position: fixed;
}

.inner-wrapper
{
  position: relative;
  padding-top: 50px;
}

#table{
  display:block;
  height:200px;
  width:80px;
  position:absolute;
  top:0;
  right:0;
  background:#0FB2F4;
  padding-top: 50px;
}