چگونه ایجاد شود: سرصفحه ثابت در هنگام اسکرول
- صفحه قبل پسرفردارى پسزمینه متمایز
- صفحه بعدی کوچک کردن سربرگ در حالي که در حال رول کردن است
آموزش اینکه چگونه از 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
- صفحه قبل پسرفردارى پسزمینه متمایز
- صفحه بعدی کوچک کردن سربرگ در حالي که در حال رول کردن است