div{ height: 650px; background:#ccc; /*the magic happens here*/ border-top:42px solid #fff; } ul{ top: 0; width: 100%; height:20px; position: fixed; background: deeppink; margin:0; padding:10px; } li{ float:left; list-style:none; padding-left:10px; } div:first-of-type{ margin-top:0; }
<!-- content to be placed inside <body>…</body> --> <ul> <li><a href="#s1">link 1</a> <li><a href="#s2">link 2</a> <li><a href="#s3">link 3</a> <li><a href="#s4">link 4</a> </ul> <div id="s1" class="first">1</div> <div id="s2">2</div> <div id="s3">3</div> <div id="s4">4</div>