Question

我正在创建一个粘性导航标题。标题后面是主图像，表格位于绝对位置的图像上。粘性导航标题工作正常，但滚动窗口时表格会跳出图像。

这是代码： 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>

SCRIPT

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

请帮忙。谢谢！

Answer 1

当元素#main-nav变得粘滞/固定时，它将从正常文档流中删除。这意味着#main-img元素不会将其考虑在内，并且会在下面移动。

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

Updated Example

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

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

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

Answer 3

您可以使用元素#main-img包装#table和div#inner-wrapper。

Jsfiddle

粘性标头激活时，绝对位置元素跳转

3 个答案: