আপনার ল্যান্ডিং লাঠি! অবস্থান - ওয়েবকিটে আঠালো জমি

position: sticky হল উপাদানের অবস্থানের একটি নতুন উপায় এবং ধারণাগতভাবে position: fixed । পার্থক্য হল position: sticky position: relative , যতক্ষণ না ভিউপোর্টে একটি প্রদত্ত অফসেট থ্রেশহোল্ড পূরণ হয়।

কেস ব্যবহার করুন

এডওয়ার্ড ও'কনরের এই বৈশিষ্ট্যটির মূল প্রস্তাব থেকে ব্যাখ্যা করা:

স্টিকি পজিশনিং চালু করা হচ্ছে

ডেমো চালু করুন

কেবল position: sticky (বিক্রেতা উপসর্গযুক্ত), আমরা একটি উপাদানকে position: relative যতক্ষণ না ব্যবহারকারী আইটেমটিকে (বা এর অভিভাবক) উপরে থেকে 15px হতে স্ক্রোল করেন:

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

top: 15px , উপাদানটি স্থির হয়ে যায়।

একটি ব্যবহারিক সেটিংয়ে এই বৈশিষ্ট্যটি চিত্রিত করার জন্য, আমি একটি ডেমো একসাথে রেখেছি যা আপনি স্ক্রোল করার সাথে সাথে ব্লগের শিরোনাম আটকে রাখে।

পুরানো পদ্ধতি: স্ক্রোল ইভেন্ট

এখন পর্যন্ত, স্টিকি প্রভাব অর্জন করতে, সাইটগুলি JS-এ ইভেন্ট scroll শ্রোতাদের সেটআপ করে। আমরা আসলে এই কৌশলটি html5rocks টিউটোরিয়ালগুলিতেও ব্যবহার করি। 1200px-এর চেয়ে ছোট স্ক্রিনে, আমাদের বিষয়বস্তুর সারণী সাইডবার 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> শিরোনাম।

কেন জেএস আদর্শ নয়

সাধারণভাবে, স্ক্রোল হ্যান্ডলারগুলি কখনই একটি ভাল ধারণা নয়। লোকেরা খুব বেশি কাজ করার প্রবণতা রাখে এবং ভাবছে কেন তাদের UI জ্যাঙ্কি।

আরও কিছু বিবেচনা করার বিষয় হল যে আরও বেশি সংখ্যক ব্রাউজার কর্মক্ষমতা উন্নত করতে হার্ডওয়্যার ত্বরিত স্ক্রোলিং প্রয়োগ করছে। এর সাথে সমস্যাটি হল যে জেএস স্ক্রোল হ্যান্ডলারগুলি চালু রয়েছে, ব্রাউজারগুলি একটি ধীর (সফ্টওয়্যার) মোডে ফিরে আসতে পারে। এখন আমরা আর GPU তে চলছি না। পরিবর্তে, আমরা CPU-তে ফিরে এসেছি। ফলাফল? আপনার পৃষ্ঠা স্ক্রোল করার সময় ব্যবহারকারীরা আরও জ্যাঙ্ক অনুভব করে।

সুতরাং, সিএসএস-এ এই ধরনের বৈশিষ্ট্য ঘোষণামূলক হওয়া অনেক বোধগম্য।

সমর্থন

দুর্ভাগ্যবশত, এই এক জন্য একটি স্পেস নেই. এটি জুন মাসে www-স্টাইলে প্রস্তাব করা হয়েছিল এবং সবেমাত্র ওয়েবকিটে অবতরণ করা হয়েছিল ৷ এর মানে ইঙ্গিত করার জন্য কোন ভাল ডকুমেন্টেশন নেই। তবে একটি বিষয় লক্ষ্য করুন, এই বাগ অনুসারে, যদি left এবং right উভয়ই নির্দিষ্ট করা হয়, left জয়ী হয়। একইভাবে, top এবং bottom একই সময়ে ব্যবহার করা হলে, top জয়ী হয়।

এই মুহূর্তে সমর্থন হল Chrome 23.0.1247.0+ (বর্তমান ক্যানারি) এবং রাতের জন্য WebKit।