Menu
I am very new to web design, and am going to make a simple webpage. I like the idea of this webpage:
http://dropplets.com/
Where the top part doesn't scroll with the rest of the page, giving a neat scrolling effect, as well as where the very top of the scrollable part is just at the bottom of the web page (as in with one "click" of the mouse scroll wheel, you'll immediately begin to see the scrolling part). How is something such as this made possible?
368
just give position:fixed; and z-index:1 to the top part which you want to back on scroll and in wrapper give position: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>
answered Sep 07 '25 07:09
Fiddle : link
Code :
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
