干净的方式来滚动div divs当滚动

我正在寻找一种干净的方式来滚动时，一个在另一个div div。我找到了一种方法来做到这一点，但它只是干净的，我只成功了第一个。干净的方式来滚动div divs当滚动

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。

来源

2014-10-21 Slava Knyazev

我如何解释该示例而不检查代码，第1部分是z-index 1，内容z-index 2的其余部分以及z-index 3的固定导航。此外，nav和Section 1的位置固定。如果将这些设置应用于文档的通常流程，则应该得到非常相似的结果。请记住，您需要定位（即，绝对，相对或固定，但不是默认静态），才能将z-index应用于元素。 – 2014-10-21 22:39:42

@ 2C-B是的，它是这样的。我刚刚发现z-indexes存在，所以我的数字可能看起来很奇怪，但你有一般的想法。 – 2014-10-21 22:42:17

我结束了使用jQuery的粘性插件。

<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()但这只是我不便 - 开发者，而不是用户。

来源

2014-10-22 02:36:55

您可能想要使用pagePiling.js插件，该插件完全提供了级联节的方式。

来源

2014-10-23 08:23:37 Alvaro

干净的方式来滚动div divs当滚动

回答

相关问题