خودتان امتحان کنید

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h2>به سمت پایین اسکرول کنید</h2>
  <p>به پایین اسکرول کنید تا افکت چسبندگی را مشاهده کنید</p>
</div>

<ul>
  <li><a class="active" href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
</ul>

<h3>مثالی از منوی چسبنده</h3>
<p>وقتی که اسکرول کنیم و به موقعیت آن برسیم، منو به سمت بالا می چسبد.</p>
<p>نکته: مرورگر اینترنت اکسپلورر از موقعیت دهی sticky یا همان چسبندگی پشتیبانی نمی کند و مرورگر سافاری، به یک دستور webkit-prefix- نیاز دارد. </p>
<p>مقداری متن. مقداری متن. مقداری متن.مقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متن</p>
<p>مقداری متن. مقداری متن. مقداری متن.مقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متن</p>
<p>مقداری متن. مقداری متن. مقداری متن.مقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متنمقداری متن. مقداری متن. مقداری متن</p>

</body>
</html>