如何使頁面的一部分不與頁面的其餘部分一起滾動？

我對網頁設計非常陌生，並且打算做一個簡單的網頁。我喜歡這個網頁的想法：如何使頁面的一部分不與頁面的其餘部分一起滾動？

其中頂部部分不與頁面的其餘部分滾動，給人一種整齊的滾動效果，以及在滾動部分的最頂部是就在網頁的底部（就像在一個「點擊」鼠標滾輪時，你會立即開始看到滾動部分）。這種情況如何成爲可能？

2013-12-09 AggieDev

看到螢火蟲的頁面，看看他們使用了什麼HTML結構和CSS樣式。 –

使用'background-attachment：fixed' css屬性。檢查簡單的w3school示例[here]（http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment） –

只給位置：固定;和z-index：1到你想要回滾的頂部，並在包裝中給位置：relative;的z-index：2;

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
<style> 
.fix-div{position:fixed; height:100%; width:100%; left:0; top:0; z-index:1;} 
#wrapper{position:relative; z-index:2; margin:100% 0 0;} 
</style> 
</head> 

<body> 
    <div class="fix-div"> 
     Fix div content goes here... 
    </div> 
    <div id="wrapper"> 
     Your content goes here... 
    </div> 
</body> 
</html>

來源

2013-12-09 04:41:50

小提琴：link

代碼：

CSS：

.main{ 
    background-color:green; 
    width:100%; 
    height:100px; 
    padding:0px; 
    margin:0px; 
    z-index:1; 
    position:fixed; 
    top:0px; 
} 

.content{ 
    height:1000px; 
    width:100%; 
    margin-top:100px; 
    z-index:10; 
    background-color:red; 
    position:relative; 
}

HTML：

<div class='main'></div> 
<div class='content'></div>

來源

2013-12-09 04:37:51

當我們給位置：絕對; div會滾動滾動... –

是的，我注意到並改變了答案！謝謝你指出！ –

對於您不想SCR部件oll set css as position：absolute;頂部：0;左：0;

來源

2013-12-09 04:38:53 Bharadwaj

如何使頁面的一部分不與頁面的其餘部分一起滾動？

回答

相關問題