چگونه ایجاد شود: سرصفحه ثابت در هنگام اسکرول

آموزش اینکه چگونه از CSS و JavaScript برای ایجاد سرصفحه ثابت در هنگام اسکرول استفاده کنید.

آزمایش کنید

سرصفحه ثابت در هنگام اسکرول ایجاد کنید

مرحله اول - HTML اضافه کنید:

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

مرحله دوم - CSS اضافه کنید:

طرح سرصفحه را تنظیم کنید؛ position: sticky و top: 0 اضافه کنید تا سرصفحه در اسکرول به سمت بالا ثابت بماند.
.header {
  پوزیشن: چسبنده;
  تپ: 0;
  پادینگ: 10پیکسلو 16پیکسلو;
  پس‌زمینه: #555;
  رنگ: #f1f1f1;
}

آزمایش کنید

عنصر تنظیم شده به عنوان پوزیشن: چسبنده; پس از آن، موقعیت آن بر اساس موقعیت اسکرول کاربر تعیین می‌شود.

عنصر چسبنده بر اساس موقعیت اسکرول کاربر بین قرارگیری نسبی و ثابت تغییر می‌کند. قبل از رسیدن به موقعیت جابجایی داده شده در视‌پورت، آن‌ها قرارگیری نسبی را حفظ می‌کنند؛ پس از رسیدن، آن‌ها در آن موقعیت "چسبیده" می‌مانند (مانند پوزیشن: فیکسد; مانند).

توجه:کم از کم باید شما حداقل یک مشخص کنید تا قرارگیری چسبنده فعال شود، تپ،رائست،بوتومم یا left 中的一个。

صفحات مرتبط

آموزش:CSS position