অবস্থান: স্টিকি ক্রোমে ফিরে এসেছে

পল কিনলান

চার বছর আগে এরিক বিডেলম্যান সেই position: sticky ল্যান্ডড ইন ওয়েবকিট , যেটি সেই সময়ে ক্রোমকে চালিত ইঞ্জিন ছিল (সাথে সাফারি সহ অন্যান্য অনেক ব্রাউজার)। এক বছর পরে, এবং ওয়েব ডেভেলপারদের আতঙ্কের জন্য আমরা Chrome থেকে position:sticky সরিয়ে দিয়েছি কারণ "বর্তমান বাস্তবায়ন এমনভাবে ডিজাইন করা হয়নি যা বিদ্যমান স্ক্রোলিং এবং কম্পোজিটিং সিস্টেমের সাথে ভালভাবে সংহত হয়"।

আমরা সর্বদা এটিকে Chrome-এ ফিরিয়ে আনতে চেয়েছি কারণ বাগটি বলেছে, "একবার আমাদের স্ক্রলিং এবং কম্পোজিটিং হাউসটি ক্রমানুসারে পেয়ে গেলে, আমাদের position: sticky এবং বৈশিষ্ট্যটি এমনভাবে প্রয়োগ করা যাতে ভালভাবে একত্রিত হয় বাকি ইঞ্জিন"। বাস্তবায়ন ট্র্যাকিং মেটা বাগ 2013 সাল থেকে কাজ করা হয়েছে.

দারুণ খবর হল Chrome 56 (বর্তমানে বিটা ডিসেম্বর 2016 অনুযায়ী, জানুয়ারি 2017-এ স্থিতিশীল) position: sticky এখন Chrome-এ ফিরে এসেছে।

অবস্থান কি: স্টিকি?

এখানে আসতে একটু সময় লেগেছে, তাহলে আমি কেন এটা নিয়ে উত্তেজিত?

position:sticky হল একটি CSS পজিশনিং অ্যাট্রিবিউট যা আপনাকে ভিউপোর্টে একটি উপাদান ঠিক করতে দেয় (অর্থাৎ, এটিকে স্ক্রিনের শীর্ষে অ্যাঙ্কর করে) কিন্তু শুধুমাত্র তখনই যখন এর প্যারেন্ট ভিউপোর্টে দৃশ্যমান হয় এবং এটি থ্রেশহোল্ড মানের মধ্যে থাকে। যখন এটি ভিউপোর্টে স্থির করা হয় না, তখন উপাদানটি position: relative । এটি প্ল্যাটফর্মে একটি খুব সুন্দর এবং সহজ সংযোজন যা ভিউপোর্টের শীর্ষে একটি উপাদান লক করার জন্য একটি onscroll ইভেন্ট হ্যান্ডলারে জাভাস্ক্রিপ্ট ব্যবহার করার প্রয়োজনীয়তা দূর করে।

এটা আমার ব্লগে মত দেখায় কি. এটি আমাকে বর্তমান বিভাগের শিরোনামটি স্ক্রিনের শীর্ষে রাখার অনুমতি দেয় যখন আপনি আমার বরং দীর্ঘ এবং শ্রমসাধ্য নিবন্ধগুলি পড়বেন:\

এই বৈশিষ্ট্যটি বাস্তবায়নের জন্য নির্দিষ্ট করুন যে position বৈশিষ্ট্যের উপাদানটিতে sticky মান থাকা উচিত যা আপনি আটকে থাকতে চান। উপরন্তু, আপনি অফসেট যোগ করতে পারেন যেখানে এটি আটকে রাখা প্রয়োজন।

    h3 {
      /* Element will be 'fixed' when it ... */
      position: sticky;
      /* ... is 10px from the top of the viewport */
      top: 10px;
    }

পূর্ববর্তী উদাহরণটি ভিউপোর্টের শীর্ষ থেকে 10px এ <h3> উপাদানটিকে ঠিক করবে। ভিউপোর্টের শীর্ষে সরাসরি এটি ঠিক করতে আপনি top বৈশিষ্ট্যটিকে top: 0px ।

এই বৈশিষ্ট্যটির জন্য সমর্থন বেশ শক্তিশালী। এটি Chrome (Yay), Firefox এবং Safari-এ উপলব্ধ। এখানে position:sticky :