停止内容取 space 置顶 div

Question

在此示例中，当我单击粘性 header 上的 "link" 时，如何使 linked 内容项 (#mypara) 显示在粘性 [= 下方33=] 而不是在它的正下方所以它被隐藏了？

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

这个 fiddle 是从其他 SO 线程继承的，所以我认为这是执行粘性 div 的正确方法，它只会在滚动后变得粘性（我无法获得 position:sticky 做任何事情，但 position:fixed 似乎是许多线程中推荐的内容）。

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

Answer 1

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

Answer 2

`

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

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

`

Answer 3

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

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

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

完整 fiddle 此处：http://jsfiddle.net/paull3876/8m3qwont/14/

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

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

停止内容取 space 置顶 div

Stop content taking space under a sticky div

javascript

css

jquery

css-position