How to make part of the webpage not scroll with the rest of the page?

css, html, javascript, web

Solution

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>

Problem

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?

Original source