时间戳

首页 > 解决方案 > 停止内容在粘性 div 下占用空间

javascript - 停止内容在粘性 div 下占用空间

问题描述

在此示例中，当我单击粘性标题上的“链接”时，如何使链接的内容项 (#mypara) 显示在粘性 div 下方，而不是直接在其下方以使其隐藏？

$(document).ready(function() {
    $(window).scroll(function() {
        var distanceFromTop = $(document).scrollTop();
        if (distanceFromTop >= $('#header').height())
        {
            $('#sticky').addClass('fixed');
        }
        else
        {
            $('#sticky').removeClass('fixed');
        }
    });
});
body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky {
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}
p[id] {
  color:red;
  /*padding-top: 170px;*/
}
#footer { background-color: #cb5454; height: 140px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="sticky">sticky <a href="#mypara">link</a></div>
<div id="section">
<p>section 1</p>
<p>section 2</p>
<p>section 3</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 8 x</p>
<p>section 9</p>
<p id="mypara">section 0 xxxx</p>
<p>section 1</p>
<p>section 2</p>
<p>section 3</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 8</p>
<p>section 9</p>
<p>section 0</p>
<p>section 1</p>
<p>section 2</p>
<p>section 3 z</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 7</p>
<p>section 8</p>
<p>section 8</p>
<p>section 9</p>
<p>section 0</p>
<p>section 1</p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
</div>
<div id="footer">foot</div>

这个小提琴是从其他 SO 线程继承的，所以我认为这是做一个只有在滚动后才变得粘滞的粘性 div 的正确方法（我无法让 position:sticky 做任何事情，但 position:fixed 似乎是推荐的多个线程）。

在此处输入图像描述

上图显示了单击链接时我希望它降落的位置

标签： javascriptjquerycsscss-position

解决方案

在滚动功能中，您可以先尝试获取window.pageYOffset滚动的当前位置，然后您可以尝试使用scrollTo(x, y)窗口的方法。Y中的值scrollTo将window.pageYOffset减去您的 div 的高度。( window.pageYOffset- height of your div)

推荐阅读