滾動時堆疊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

回答

相關問題