当粘性标题活动时，绝对位置元素会跳出答案

【问题标题】：An absolute position element jump off when the sticky header active当粘性标题活动时，绝对位置元素会跳出
【发布时间】：2015-12-12 05:08:26
【问题描述】：

我正在创建一个粘性导航标题。跟随标题是主图像，并且在图像上具有绝对位置的表格。粘性导航标题运行良好，但是当我滚动窗口时表格会跳出图像。

代码如下： http://jsfiddle.net/sarashi/y8td1s15/

HTML

<header>
  <div id="main-nav">Main-Nav</div>
  <div id="main-img">Main-Image</div>
  <div id="table">
     A Table Here
  </div>
</header>
<section>
  <p></p>
  <p></p>
</section>

脚本

$(document).ready(function () {

var menu = document.querySelector('#main-nav');
var origOffsetY = menu.offsetTop;

        function scroll() {
        if ($(window).scrollTop() >0) {
            $('#main-nav').addClass('sticky');
        } else {
            $('#main-nav').removeClass('sticky');
        }
    }

document.onscroll = scroll;

});

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;
}

请帮忙。谢谢！

【问题讨论】：

标签： jquery css

【解决方案1】：

当元素#main-nav 变得粘滞/固定时，它会从正常的文档流中移除。这意味着#main-img 元素没有考虑到它，它被移到了下面。

一个简单的解决方法是在 #main-nav 元素具有粘性时替换它。您无需更改 HTML。

Updated Example

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

当#main-nav 元素的类为.sticky 时，选择器#main-nav.sticky ~ #main-img 将选择随后的#main-img 兄弟元素。

【讨论】：

感谢详细回答。一个简单的线条 css 使滚动更流畅。

【解决方案2】：

JavaScript 不是必需的。

小提琴：http://jsfiddle.net/y8td1s15/2/

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

添加位置：固定

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

添加 padding-top: 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;
}

【讨论】：

太棒了！这对我来说更容易。谢谢。

【解决方案3】：

您可以将#main-img 和#table 包装成一个元素(div#inner-wrapper)。

Jsfiddle

【讨论】：

这并不能完全解决问题。它不能顺利向下滚动。尝试向下滚动 5px，您会注意到元素弹开。将您的示例与我的示例进行比较..
这么简单的方法解决了我没有想到的问题。非常感谢。还要在这里感谢 Josh Crozier。