<header>
  <h1>position:sticky menü örneği</h1>
</header>
<nav>
  <a href="">Menü 1</a>
  <a href="">Menü 2</a>
  <a href="">Menü 3</a>
  <a href="">Menü 4</a>
</nav> 
<main>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
  <p>Sayfayı aşağı doğru kaydırdığınızda, kırmızı gezinme çubuğu tarayıcı penceresinin üst kısmına yapışık kalır.</p>
</main>
body {
  background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/cheap_diagonal_fabric.png);
  font: 20px Tahoma, Geneva, sans-serif;
  padding: 0;
  width: 550px;
  margin: 0 auto;
}

header {
  text-align: center;
  padding: 30px 0;
}

header h1 {
  color: #999;
  text-shadow: 0 0 0 transparent, 0 1px 0 #fff, 0 -1px 0 #555;
  font-size: 40px;
}

nav {
  color: white;
  background: -webkit-repeating-linear-gradient(145deg, #222, #222 10px, #333 10px, #333 20px);
  background: repeating-linear-gradient(-55deg, #222, #222 10px, #333 10px, #333 20px);
  height: 60px;
  width: 570px;
  margin-left: -10px;
  line-height: 55px;
  position:sticky;
  top: 0;
  color: white;
}

nav:before {
 content: '';
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 10px 10px 0;
 border-color: transparent #222222 transparent transparent;
 position: absolute;
 left: 0;
 bottom: -10px
}

nav:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #222222 transparent transparent transparent;
  position: absolute;
  right: 0;
  bottom: -10px
}

nav a {
  padding-left: 50px;
  color: white;
  text-decoration: none;
}

main {
  background: #fff;
  height: 1000px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  padding: 10px 20px;
}
Rerun