فرود خود را بچسبانید! موقعیت - زمین های چسبنده در WebKit

position: sticky روش جدیدی برای قرار دادن عناصر است و از نظر مفهومی شبیه position: fixed است. تفاوت این است که یک عنصر با position: sticky مانند position: relative در والد خود رفتار می کند، تا زمانی که یک آستانه آفست معین در نمای دید برآورده شود.

موارد استفاده کنید

برگرفته از پیشنهاد اصلی ادوارد اوکانر در مورد این ویژگی:

معرفی موقعیت چسبنده

راه اندازی نسخه ی نمایشی

با افزودن position: sticky (پیشوند فروشنده)، می‌توانیم به یک عنصر بگوییم position: relative تا زمانی که کاربر مورد (یا والد آن) را به اندازه 15 پیکسل از بالا پیمایش کند:

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

در top: 15px ، عنصر ثابت می شود.

برای نشان دادن این ویژگی در یک محیط عملی، من یک نسخه آزمایشی گردآوری کرده‌ام که در حین حرکت، عناوین وبلاگ‌ها را می‌چسباند.

رویکرد قدیمی: رویدادهای اسکرول

تا به حال، برای دستیابی به اثر چسبنده، سایت‌ها شنونده‌های رویداد scroll را در JS تنظیم می‌کردند. ما در واقع از این تکنیک در آموزش های html5rocks نیز استفاده می کنیم. در صفحه‌های کوچک‌تر از 1200 پیکسل، نوار کناری فهرست مطالب ما به position: fixed .

در اینجا (روش قدیمی) برای داشتن یک هدر است که وقتی کاربر به پایین اسکرول می‌کند به بالای درگاه نمایش می‌چسبد و وقتی کاربر به بالا اسکرول می‌کند به جای خود باز می‌گردد:

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

آن را امتحان کنید: http://output.jsbin.com/omanut/2/

این به اندازه کافی آسان است، اما اگر بخواهید این کار را برای دسته‌ای از گره‌های DOM انجام دهید، مثلاً هر عنوان <h1> وبلاگ در حین پیمایش کاربر، این مدل به سرعت خراب می‌شود.

چرا JS ایده آل نیست

به طور کلی، کنترل کننده های اسکرول هرگز ایده خوبی نیستند. مردم تمایل دارند بیش از حد کار کنند و تعجب می کنند که چرا رابط کاربری آنها نامرتب است.

نکته دیگری که باید در نظر گرفت این است که مرورگرهای بیشتری از پیمایش سریع سخت افزاری برای بهبود عملکرد استفاده می کنند. مشکل این است که در JS Scroll handlers در حال بازی هستند، مرورگرها ممکن است به حالت کندتر (نرم افزاری) برگردند. اکنون دیگر روی GPU کار نمی کنیم. در عوض، ما به CPU بازگشته ایم. نتیجه؟ کاربر هنگام پیمایش صفحه شما، jank بیشتری را درک می کند.

بنابراین، بسیار منطقی است که چنین ویژگی در CSS اعلامی باشد.

حمایت کردن

متأسفانه، مشخصاتی برای این مورد وجود ندارد. در ماه ژوئن در www-style پیشنهاد شد و به تازگی در WebKit قرار گرفت . این بدان معناست که هیچ سند خوبی برای اشاره وجود ندارد. اما یک نکته قابل توجه است، طبق این اشکال ، اگر هر دو left و right مشخص شده باشند، left برنده می شود. به همین ترتیب، اگر top و bottom به طور همزمان استفاده شود، top برنده است.

پشتیبانی در حال حاضر Chrome 23.0.1247.0+ (Canary فعلی) و WebKit شبانه است.