このページをスクロールしてください。メニューが画面の上辺に達すると固定されます。
Chrome、Firefox、Safari、Opera（ver.44から）は見れます。IE、Edge は未実装。
メニュー部分は <nav>要素を使っています。この <nav>に position: sticky を指定しています。
内容がスクロールする要素が親である必要があるため、<nav> は <header>要素の外に出してます。
このページのHTML抜粋
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Position fixed Demo：ほんっとにはじめてのHTML5とCSS3</title>
<!--中略-->
</head>
<body>
<header>
<h1><a href="#">Position fixed Demo</a></h1>
</header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
</ul>
</nav>
<div id="container">
<!--中略-->
</div>
<footer>
<small>Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.</small>
</footer>
</body>
</html>
このページのCSS抜粋
header, nav, footer {
width:100%;
background:rgba(0,0,0,.6);
color:#fff}
header {
background:rgba(0,0,0,.3);
padding-top:10px}
header h1 a {
font-size:35px;
line-height:130px;
color:#fff}
header h1 a:hover {text-decoration:none}
/*nav*/
nav {
position:-webkit-sticky;
position:sticky;
top:0;
z-index:1}