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

Question

在此示例中，当我单击粘性标题上的“链接”时，如何使链接的内容项（#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的正确方法，该div仅在滚动后才变得粘稠（我无法让position：sticky做任何事情，但position：fixed似乎是在多个线程中推荐了什么？

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

Answer 1

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

Answer 2

`

SlackBot

$(document).ready(function() {
        $(window).scroll(function() {
            var distanceFromTop = $(document).scrollTop();
            if (distanceFromTop >= $('#header').height())
            {
                $('#sticky').addClass('fixed');
            }
            else
            {
                $('#sticky').removeClass('fixed');
            }
        });
    });
//add this. it will scroll to the div #mypara with 150px top offset
$('a[href*=\\#]:not([href$=\\#])').click(function() {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 150
    }, 500);
});

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

`

Answer 3

正如Jean-Marc Zimmer所指出的那样，使用Sticky消除了对javascript的需求，但仍然存在在sticky div下方出现元素的问题。

一种解决方案是添加一个伪元素：

p[id]::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

在这里完全拨弄：http://jsfiddle.net/paull3876/8m3qwont/14/

请注意，position：sticky在IE11中不起作用。

请注意，在p [id]中添加填充或边框（不在:: before中）将停止此效果。不知道为什么！