Question

I have basic knowledge of javascript and jquery . I want to implement design like Sevenly which is like a page/div is move over another but I don’t know how to start with that . Let me know if anyone has as idea on how to implement this ?

Answer 1

If the first container has a specific height, then I think the most straight forward solution would be to fix the first container (position:fixed). Then you add a margin-top to the rest to push the rest down so it starts just below the first container:

HTML:

<div id="header">Header</div>
<div id="rest">
    <div>Other 1</div>
    <div>Other 2</div>
    <div>Other 3</div>
</div>

CSS:

div#header{ 
    position:absolute;
    position:fixed;
    width: 100%;
    height:150px;
    border: 2px dashed yellow; 
    background-color: lightyellow; 
}
div#rest{
    margin-top:150px;
    position:relative;
}  
div#rest div{    
    height: 300px;
    border: 2px dashed green;
    background-color: lightgreen;
} 

The position:absolute; is for browsers that don’t support fixed. Making it absolute will causes it to behave like fixed, except that it scrolls along with the rest of the page. The position:relative; on the rest is because of z-stacking. fixed-ing the header container causes it to be put in it’s own layer on top of everything else; setting the rest to relative puts the rest on top of the header again.

See jsfiddle demo here.

If you don’t have a specific height on the header, then you will probably need to use javascript.