滚动时堆叠div

我想要格式化博客上的帖子，以便在用户向下滚动页面时堆叠'标题div'。我解释这个的唯一方法就是通过欺骗和使用z-index来模拟它应该看起来的样子来制作一个小小的demo。滚动时堆叠div

我想重新创建这种效果，但要使其适用于博客上的帖子。这可能吗？

编辑：试图找到一种方法来使用JavaScript创建这种效果。

下面是当前的CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

h2, h3, p { 
    padding: 0px; 
    margin: 0px; 
} 

#container { 
    position: relative; 
    width: 360px; 
    margin: 0px auto; 
} 

#header { 
    position: fixed; 
    top: 0px; 
    width: 360px; 
    height: 60px; 
    background: #fff; 
    z-index: 10; 
} 

#right_column { 
    width: 360px; 
    margin: 60px 0px 0px 0px; 
} 

    #right_column .first_title { 
     position: relative; 
     margin: 0px; 
     font-size:32px; 
     line-height: 30px; 
     z-index: 9; 
     background: #fff; 
    } 

    #right_column .first_fixed { 
     position: fixed; 
     top: 60px; 
     z-index:6; 
     width: 360px; 
     background: #eee; 
     border-top: #999 1px solid; 
    } 

    #right_column .first { 
     position: relative; 
     z-index: 5; 
     background: #fff; 
    } 

    #right_column .second_title { 
     position: relative; 
     margin: 0px; 
     font-size:32px; 
     line-height: 30px; 
     z-index: 5; 
     background: #fff; 
    } 

    #right_column .second_fixed { 
     width: 360px; 
     position: fixed; 
     top: 80px; 
     z-index: 3; 
     border-top: #999 1px solid; 
     background: #eee; 
    } 

    #right-column .second { 
     position: relative; 
     z-index: 2; 
    }

这里的标记：

<h2 class="first_title">This is the article title.</h2> 
     <h3 class="first_fixed">This is the article title.</h3> 
       <p class="first">This is some text.</p> 
    <h2 class="second_title">This is the article title.</h2> 
     <h3 class="second_fixed">This is the article title.</h3> 
       <p class="second">This is some text.</p>

来源

2012-01-31 Ryan

为什么你不只是在你的博客上“作弊”，并在所有地方使用z-index？ – 2012-01-31 21:36:05

我不确定你在这里问什么 - 你想不使用'z-index'来创建这个效果？看起来你已经有了适用于博客帖子的解决方案。 – Hannele 2012-01-31 21:36:06

当某人在博客上发帖时，他们不希望每次都增加每个连续帖子的索引值。 – Ryan 2012-01-31 21:37:42

我不知道你问什么..我想你想得的替代你已经找到了一个。在这种情况下，您可能需要查看此example中的jQuery waypoints插件。您可以定义滚动页面时触发事件的标记。
这里它的main page

来源

2012-01-31 21:45:47

滚动时堆叠div

回答

相关问题