Question

我正在寻找一种干净的方法来在滚动时将div一个级联到另一个。我找到了一种方法来做到这一点，但它只是干净而且我只是成功完成了第一次。

This is what I have, observe how the "section 1" goes under the others when scrolling down. 我之前得到的代码就像我说的那样非常混乱，感觉它是错误的方式，但这是主要的概念：

  <div style="left:0;" id="section-1"class="section">
                <h2><a name="1">Section 1</a></h2>
                <p>Blahaha
                </p>
            </div>
            <div style="z-index:-2; height: 100%;"></div>
            <div></div>

还有一小块css：

#section-1{
    position:fixed;
    z-index: -1;
}

<div></div>部分只是不会抛出我在页面其余部分的代码部分：

.section:nth-of-type(odd) {
    background: #dddddd;
}

如果有人对此有一些了解，那就太好了。

我愿意为此使用jquery。

Answer 1

我最终使用了jquery sticky插件。

<script type='text/javascript' src='jquery.js'></script>
        <script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $(".section").sticky({topSpacing:$('#navigation').height()});
  });
</script>

这导致了nthchild()的一些小问题，但这对我来说只是一个不便 - 开发人员而不是用户。

Answer 2

您可能希望使用pagePiling.js插件，它提供了完全相同的级联部分。

滚动时清除级联div的方法

2 个答案: