2012-01-31 118 views
3

我想要格式化博客上的帖子,以便在用户向下滚动页面时堆叠'标题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> 
+1

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

+0

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

+0

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

回答

1

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