"অবস্থান: স্টিকি;" ওয়ার্কিং সিএসএস এবং এইচটিএমএল নয়

177

আমি নেভিগেশন বারটিকে একবারে স্ক্রোল করে শীর্ষে আটকে রাখতে চাই, তবে এটি কাজ করছে না এবং এর কারণ সম্পর্কে আমার কোনও ধারণা নেই। আপনি যদি সহায়তা করতে পারেন তবে এখানে আমার এইচটিএমএল এবং সিএসএস কোড রয়েছে:

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}
<nav style="position: sticky; position: -webkit-sticky;">
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>
স্নিপেট প্রসারিত করুন

html  css  css-position 
— Harleyoc1
সূত্র
10
অবস্থান: স্টিকি কোথায় থাকতে হবে তা বলার জন্য একটি সমন্বয় প্রয়োজন
— জি-সিরিলাস
36
অভিভাবক উপাদানগুলির সাথে আপনাকেও যত্নবান হতে হবে। position: stickyআপনি যদি সাবধান হন না তবে যদি এটি কোনও ফ্লেক্সবক্সের ভিতরে থাকে তবে কাজ করা বন্ধ করতে পারে এবং যদি এটির মধ্যে overflow: hiddenবা এর overflow: autoমধ্যে যা কিছু থাকে এবং স্ক্রল হয় তবে তা ব্যর্থ হয় (দেহের শিকড় বা
— অতিপ্রবাহের
2
@ user56reinstatemonica8 ওএমজি আমাকে overflow: hiddenএবং সম্পর্কে সম্পর্কে বলার জন্য অনেক ধন্যবাদ overflow: auto! আমি এই
— কৃপণতাটি

উত্তর:

206

স্টিকি পজিশনিং আপেক্ষিক এবং স্থির অবস্থানের সংকর। একটি নির্দিষ্ট প্রান্তিক অঞ্চল অতিক্রম না করা অবধি উপাদানটিকে আপেক্ষিক অবস্থান হিসাবে বিবেচনা করা হবে, যার স্থলে এটি স্থির অবস্থান হিসাবে বিবেচিত হবে।
...
আপনি এর অন্তত একটি সঙ্গে একটি থ্রেশহোল্ড নির্দিষ্ট করতে হবে top, right, bottom, অথবা leftআশানুরূপ আচরণ করে চটচটে পজিশনিং জন্য। অন্যথায়, এটি আপেক্ষিক অবস্থান থেকে পৃথক করা যাবে। [ সূত্র: এমডিএন ]

সুতরাং আপনার উদাহরণে, আপনাকে topসম্পত্তিটি ব্যবহার করে অবস্থানটি নির্ধারণ করতে হবে যেখানে এটি শেষের দিকে আটকা উচিত ।

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}
<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>
স্নিপেট প্রসারিত করুন

— মারভিন
সূত্র
124
সাধারণভাবে, এই উত্তরটি কাজ করার জন্য যথেষ্ট নয়, পিতা-মাতারও ওভারফ্লো সম্পত্তি থাকা উচিত নয়।
— ভিলিয়াসএল
আপনার মন্তব্যের জন্য ধন্যবাদ. আমি আপনার সাথে একমত যে ওপি এর অন্যান্য উদাহরণগুলির জন্য আমার উত্তর যথেষ্ট নাও হতে পারে। অন্যান্য উত্তরগুলি এটিকে নির্দেশ করে :)
— মার্ভিন
আমি মনে করি কৌশলটি হ'ল পজিশনটি কেবল সেই শিশুদের ক্ষেত্রে প্রয়োগ করা যেতে পারে যা পরিচিত উচ্চতার সাথে স্ক্রোলযোগ্য পিতামাতার অন্তর্ভুক্ত, (একটি ফ্লেক্সবক্সের সরাসরি বাচ্চাদের একটি উচ্চতা রয়েছে যা অন্যান্য ফ্লেক্স-আইটেম থেকে গণনা করা হয়)
— কোড
@ উইলিয়াসল আপনার মন্তব্যের জন্য আপনাকে ধন্যবাদ! আমার অবস্থান নিয়ে এই সমস্যাটি ছিল: স্টিকি, আমি জানতাম না যে আপনার জন্য না থাকলে আমি কোথাও এই তথ্যটি পাইনি।
— পাইওটর স্লাগাগুরা
চটচটে অবস্থানের ওভারফ্লো সম্পত্তি সহ কোনও পিতা বা মাতা থাকা উচিত নয়, কিছু ওয়েব ব্রাউজারগুলিতেও স্টিকি সমর্থনযোগ্য নয়
— রোহান শেনয়
331

পূর্বপুরুষের উপাদানটির ওভারফ্লো সেট রয়েছে কিনা তা পরীক্ষা করুন (উদাঃ) overflow:hidden ); এটি টগল করার চেষ্টা করুন। আপনার প্রত্যাশার তুলনায় আপনাকে ডিওএম গাছটি উপরে যেতে হবে =)।

এটি position:stickyকোনও বংশধরদের উপর আপনার প্রভাব ফেলতে পারে ।

— MarsAndBack
সূত্র
36
আমি আপনাকে একাধিকবার upvote করতে চাই! আমি স্বীকার করার চেয়ে যত্নের চেয়ে এটি আমাকে প্রায়শই কামড়েছে।
— আলেকজান্ডার ভারভিজক
2
এটি সঠিক উত্তর। তবে কোন পিতামাত্ত্বিক উপাদান সমস্যা সৃষ্টি করছে তা সন্ধান করা কঠিন। আমি বাবা-মায়ের ওভারফ্লো সম্পত্তিটি সনাক্ত করতে সহায়তা করার জন্য একটি jquery স্ক্রিপ্ট লিখেছিলাম যা সমস্যাটি চিহ্নিত করেছে (কেবল এটি আপনার কনসোলটিতে চালান)। স্ক্রিপ্টটি কয়েকটি লাইন হওয়ায় আমি নীচের স্ক্রিপ্টটি সম্বলিত একটি উত্তর যুক্ত করেছি।
— danday74
5
আমি আপনার "মূল উপাদানগুলিতে"
— শে-আজেহ
5
আমিও "s" এর মিস :( এবং যে সমস্যা হয়েছে। অনেক জায়গায় মানুষ লিখতে আপনি শুধুমাত্র না পিতা বা মাতা সব বাবা পরীক্ষা করা উচিত। আমি পরীক্ষা করে কল করে আমার সমস্যা পাওয়া $(stickyElement).parents().css("overflow", "visible")ওয়েব কনসোলে সাহায্য করবে এবং এটি করেনি। তারপর আমি অবস্থিত overflow:hiddenস্টাইলের সাথে সুদূর পিতামাতারা সমস্যাটি তৈরি করেছেন
— .আমি
2
আপনার যদি চেক দরকার হয় তবে overflow:hiddenপ্রদত্ত উপাদানটির সমস্ত পিতামাতা / পূর্বপুরুষদের পরীক্ষা করতে আপনি এই স্ক্রিপ্টটি আপনার ব্রাউজার কনসোলে চালাতে পারেন: gist.github.com/brandonjp/478cf6e32d90ab9cb2cd8cbb0799c7a7
— brandonjp
100

আমারও একই সমস্যা আছে এবং আমি উত্তরটি এখানে পেয়েছি ।

যদি আপনার উপাদানটি প্রত্যাশার মতো স্টিক না করে থাকে তবে প্রথমে যাচাই করার জন্য পাত্রে প্রয়োগ করা নিয়মগুলি।

বিশেষত, পিতামাতার উপর সেট কোনও ওভারফ্লো সম্পত্তি অনুসন্ধান করুন। আপনি ব্যবহার করতে পারেন না : overflow: hidden, overflow: scrollবা overflow: autoএকটি অভিভাবক উপর position: stickyউপাদান।

— মিফতাহ মিজওয়ার
সূত্র
এটিও সঠিক উত্তর তবে আমার উত্তরটিও দেখুন যা সমস্যার কারণে পিতামাতাকে সহজে সনাক্ত করতে সহায়তা করে।
— danday74
9
আপনি না শুধুমাত্র নিকটতম পিতা বা মাতা ধারক কিন্তু সব পিতা বা মাতা উপাদান পরীক্ষা করা উচিত গুলি ।
— মারিউজ পাভেলস্কি
হ্যাঁ, ঠিক তা করতে আমার উত্তরটি দেখুন এবং খুব তাড়াতাড়ি সমস্ত পিতামাতাকে চেক করুন
— danday74
1
লিঙ্কটি আমাকেও সহায়তা করেছিল। "... আপনি যদি ওভারফ্লো ব্যবহার না করে থাকেন এবং এখনও সমস্যা দেখা না দেয় তবে প্যারেন্টের উপর উচ্চতা সেট করা আছে কিনা তা পরীক্ষা করা উচিত ..."
— জেনিটিক্স
জীবন রক্ষাকারী, সমস্যার সত্যই সহজ বর্ণনা, তবে কি কেবল এই
— রাহুল সিং
32

আমি আরও কিছু জিনিস এসেছি:

যখন আপনার স্টিকি উপাদানটি একটি উপাদান (কৌনিক ইত্যাদি) হয়

  • যদি 'স্টিকি' উপাদানটি নিজেই কোনও কাস্টম উপাদান-নির্বাচনকারী হিসাবে একটি উপাদান থাকে, যেমন নামের একটি কৌণিক উপাদান <app-menu-bar>আপনাকে উপাদানটির সিএসএসে নিম্নলিখিতটি যুক্ত করতে হবে:

    :host { display: block; }

    অথবা 

    app-menu-bar  { display: block; }   // (in the containing component's css)

    বিশেষত আইওএস-এ সাফারিটি একটি কৌণিক অ্যাপ্লিকেশনটির display:blockমূল উপাদান app-rootপর্যন্ত প্রয়োজন বলে মনে হচ্ছে বা এটি আটকে থাকবে না।

  • যদি আপনি কোনও উপাদান তৈরি করছেন এবং উপাদানটির ভিতরে সিএসএস সংজ্ঞায়িত করছেন (ছায়া ডিওএম / এনক্যাপসুলেটেড শৈলী), নিশ্চিত করুন position: stickyযে এটি 'বাহ্যিক' নির্বাচকের জন্য প্রয়োগ করা হচ্ছে (উদাহরণস্বরূপ app-menu-bar, দেবতুলগুলিতে স্টিকি অবস্থানটি দেখানো উচিত) এবং এর div মধ্যে কোনও শীর্ষ স্তর নয় উপাদান। কৌনিক সহ, এটি :hostআপনার উপাদানগুলির জন্য সিএসএসে নির্বাচকের সাথে অর্জন করা যেতে পারে ।

    :host
{
    position: sticky;
    display: block;   // this is the same as shown above
    top: 0;
    background: red;    
}

অন্যান্য

  • যদি আপনার স্টিকি উপাদানের অনুসরণকারী উপাদানগুলির একটি শক্ত পটভূমি থাকে তবে এটিকে নীচের দিকে স্লাইডিং থেকে আটকাতে আপনাকে অবশ্যই নিম্নলিখিতটি যুক্ত করতে হবে:

    .sticky-element { z-index: 100; }
.parent-of-sticky-element { position: relative; }

  • আপনার স্টিকি উপাদানটি অবশ্যই প্রথমে (আপনার সামগ্রীর আগে) ব্যবহার করা উচিত topএবং যদি ব্যবহার করা হয় তবে এটির পরে bottom।

  • overflow: hiddenআপনার মোড়কের উপাদান ব্যবহার করার সময় জটিলতা রয়েছে - সাধারণভাবে এটি ভিতরে স্টিকি উপাদানটিকে মেরে ফেলবে। এই প্রশ্নে আরও ভাল ব্যাখ্যা করা হয়েছে

  • অনস্ক্রিন কীবোর্ড দৃশ্যমান হলে মোবাইল ব্রাউজারগুলি স্টিকি / স্থির অবস্থানীয় আইটেমগুলি অক্ষম করতে পারে। আমি সঠিক নিয়ম সম্পর্কে নিশ্চিত নই (কেউ কি কখনও জানতে পারে) তবে কীবোর্ডটি দৃশ্যমান হওয়ার পরে আপনি উইন্ডোতে এক ধরণের 'উইন্ডো' দেখছেন এবং আপনি সহজেই জিনিসগুলিকে আটকে রাখতে সক্ষম হবেন না পর্দার প্রকৃত দৃশ্যমান শীর্ষ।

  • নিশ্চিত করো যে তোমার আছে:

    position: sticky;

    এবং না

    display: sticky;

বিভিন্ন ব্যবহারের উদ্বেগ

  • আপনার ডিজাইন যদি মোবাইল ডিভাইসে স্ক্রিনের নীচে জিনিসগুলি স্টিক করার জন্য আহ্বান জানায় তবে সাবধান হন। উদাহরণস্বরূপ আইফোন এক্স-এ তারা সোয়াইপ অঞ্চল (হোমপেজে ফিরে যেতে) নির্দেশ করতে একটি সরু রেখা প্রদর্শন করে - এবং এই অঞ্চলের অভ্যন্তরের উপাদানগুলি ক্লিকযোগ্য নয়। সুতরাং আপনি যদি কিছু আটকে থাকেন তবে আইফোন এক্সে পরীক্ষা করে নেওয়ার বিষয়টি নিশ্চিত হন যা ব্যবহারকারীরা এটি সক্রিয় করতে পারে। লোকেরা এটি ক্লিক করতে না পারলে একটি বড় 'এখনই কিনুন' বোতামটি ভাল নয়!
  • আপনি যদি ফেসবুকে বিজ্ঞাপন দিচ্ছেন তবে ওয়েবপৃষ্ঠাটি ফেসবুকের মোবাইল অ্যাপ্লিকেশনগুলির মধ্যে একটি 'ওয়েবভিউ' নিয়ন্ত্রণে প্রদর্শিত হবে। বিশেষত যখন ভিডিও প্রদর্শিত হবে (যেখানে আপনার সামগ্রীটি কেবলমাত্র পর্দার নীচের অর্ধেকে শুরু হয়) - তারা প্রায়শই সম্পূর্ণরূপে আপনার পৃষ্ঠাকে একটি স্ক্রোলযোগ্য ভিউপোর্টের মধ্যে রেখে চটচটে উপাদানগুলিকে জড়িয়ে দেয় যা আসলে আপনার স্টিকি উপাদানগুলিকে পৃষ্ঠার শীর্ষে অদৃশ্য হয়ে যেতে দেয়। কেবলমাত্র ফোনের ব্রাউজারে বা এমনকি ফেসবুকের ব্রাউজারেই নয় যা সকলের সাথে আলাদা আচরণ করতে পারে কোনও আসল বিজ্ঞাপনের প্রসঙ্গে পরীক্ষা করতে ভুলবেন না।
— Simon_Weaver
সূত্র
@ সের্গে আমি সাফারিতে কোনটি সঠিক আচরণ display: blockএবং position: relativeট্রিগার ঘটাচ্ছে তা পুরোপুরি পরিষ্কার নয় - মনে হচ্ছে যে কেবল display: blockপ্রয়োজন ছিল? অবশ্যই দুটোই নির্দিষ্ট করে
— দেওয়াতে
2
কেবল display: blockযথেষ্ট ছিল
— সের্গেই
27

এটি মার্সএন্ডব্যাক এবং মিফতাহ মিজওয়ারের উত্তরগুলির ধারাবাহিকতা।

তাদের উত্তর সঠিক। তবে সমস্যাটি পূর্বসূরীদের সনাক্ত করা কঠিন।

এটি খুব সহজ করতে, আপনার ব্রাউজার কনসোলে কেবল এই jQuery স্ক্রিপ্টটি চালান এবং এটি আপনাকে প্রতিটি পূর্বপুরুষের ওভারফ্লো সম্পত্তিটির মান বলবে।

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

যেখানে কোনও পূর্বপুরুষের overflow: visibleসিএসএস পরিবর্তন হয় না যাতে এটি হয়!

এছাড়াও, অন্য কোথাও যেমন বলা হয়েছে, নিশ্চিত করুন যে আপনার স্টিকি উপাদানটি সিএসএসে রয়েছে:

.your-sticky-element {
    position: sticky;
    top: 0;
}
— danday74
সূত্র
2
এটা খুব সহায়ক ছিল। আমি যে মানটির একটি মান আছে তা আমি দ্রুত সনাক্ত করতে সক্ষম হয়েছি overflow: invisible।
— ডেভিড ব্রোয়ার 21
4
আপনার পৃষ্ঠায় jQuery না থাকলে এটি যুক্ত করতে আপনি এই ছোট স্নিপেটটি কনসোলে চালাতে পারেন: (async function() { let response = await fetch('https://code.jquery.com/jquery-3.3.1.min.js'); let script = await response.text(); eval(script); })();
— ম্যাজিকমেকার
8
: আপনি এই স্নিপেট যে jQuery অ "দৃশ্যমান" ওভারফ্লো পিতা বা মাতা এটি প্রয়োজন হয় না চালাতে পারেন var p = $0.parentElement; while(p != null) { var ov = getComputedStyle(p).overflow; if(ov !== 'visible') console.warn(ov, p); else console.log(ov, p); p = p.parentElement; }কোথায় $0হয় শেষ উপাদান বিকাশকারী সরঞ্জামের নির্বাচন করেছেন।
— মারিউজ পাভেলস্কি
12

এটি কাজ করতে আমাকে নিম্নলিখিত সিএসএস ব্যবহার করতে হয়েছিল:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

যদি উপরে কাজ না করে থাকে ...

সমস্ত পূর্বপুরুষের মাধ্যমে যান এবং নিশ্চিত করুন যে এই উপাদানগুলির কোনওটিরই নেই overflow: hidden। আপনাকে এটিতে পরিবর্তন করতে হবেoverflow: visible

— Unicco
সূত্র
1
প্রদর্শন: ফ্লেক্স জিনিসটি তৈরি করে
— MaciejLisCK
6

আপনি যদি এটি জুড়ে এসেছেন এবং আপনার স্টিকি কাজ করছে না - পিতামাতাকে এটির চেষ্টা করুন:

display: unset

আমার জন্য কাজ করেছেন

— brianokinyi
সূত্র
এটিই সেইটি.
— মিমি -৩৩
উহু! এটি পিতামাতার উপাদানগুলির একটি সীমিত উচ্চতা (যেমন কোনও নভবারের ধারক বা কোনও কিছু, পুরো দেহ বা পৃষ্ঠার ধারকের বিপরীতে) রয়েছে - এটি মনে হয় যে স্টিকিগুলি তাদের বাইরে স্ক্রোল করতে পছন্দ করে না পিতামাতারা (যা একেবারেই হাস্যকর!) এখন প্রত্যেকেরই পিতামাতাকে সেট করতে সক্ষম হওয়ার জন্য এতটা ভাগ্যবান হওয়া দরকার display: unset, যা সবসময় তাত্ক্ষণিকভাবে কার্যকর হয় না
— বেন ফিলিপ
এছাড়াও contents, initial(?) এবংinline
— বেন ফিলিপ
5

মজার মুহূর্তটি আমার কাছে স্পষ্ট ছিল না: position: stickyআপনি যদি ডিটুলগুলি ব্যবহার করে সেট করেন তবে কমপক্ষে Chrome 70 এ প্রয়োগ করা হয় না।

— Ik
সূত্র
আপনার কাছে কি এর কোনও উত্স আছে, বা এগুলি কীভাবে কাজ করতে হয় সে সম্পর্কে কোনও অন্য তথ্য?
— এজেম্যান্সফিল্ড
5

দেখে মনে হচ্ছে যে স্ট্যাবিড থাকা এই নাবারটি অন্য সামগ্রীর সাথে কোনও ডিভ বা বিভাগের মধ্যে থাকা উচিত নয়। সমাধানটির কোনওটিই আমার পক্ষে কাজ করছিল না আমি নাভিবারটিকে ডিভের বাইরে না নিয়েছিলাম যা নাবার বারটি অন্য শীর্ষবারের সাথে ভাগ করে নিয়েছিল Iআমি এর আগে টপবার এবং নাবার একটি সাধারণ ডিভ দিয়ে মোড়ানো ছিল।

— solaris333
সূত্র
আপনাকে ধন্যবাদ, আমি এটিই খুঁজছিলাম! আমার পক্ষে ওভারফ্লো সহ কোনও বাবা-মা ছিল না, বা উচ্চতার কোনও সমস্যা ছিল না। গৃহীত উত্তরেও এই তথ্যটি দেখতে ভাল লাগবে।
— স্যাগলামেসেম
আমি কেবল পরীক্ষার মাধ্যমে জানতে পেরেছি যে স্টিকি তার মূল উপাদানটির বাইরে স্ক্রোল করবে না। এটি কত অন্যান্য ভাইবোন রয়েছে তা এতটা গুরুত্বপূর্ণ নয়, তবে এর পিতামাতারা স্পষ্টতই একটি নভবারের ধারক হতে পারেন না তবে এটি কোনও পৃষ্ঠা / বিষয়বস্তুর ধারকের স্তরের কিছু হতে পারে :( এটি হাস্যকর
— বেন ফিলিপ
তবে লো! যদি আপনি পারেন তবে সীমাবদ্ধ পিতামাতাকে সেট করে দিলে display: unsetএই বিধিনিষেধটি সরিয়ে নেওয়া হবে! দেখুন স্ট্যাকওভারফ্লো.com/a/60560997/2902367 এছাড়াও contents, initial(?) এবংinline
— বেন ফিলিপ
4

আমার মন্তব্য থেকে:

position:sticky যেখানে লাঠি রাখতে হবে তার টেলিফোনে একটি সমন্বয় প্রয়োজন 

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}
<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>
স্নিপেট প্রসারিত করুন

এফএফ এবং ক্রোম বাদে অন্যান্য ব্রাউজারগুলির জন্য ব্যবহারের জন্য পলিফিল রয়েছে। এটি একটি পরীক্ষামূলক নিয়ম যা ব্রাউজারগুলির মাধ্যমে কোনও সময়ে প্রয়োগ করা বা নাও কার্যকর করা যায়। কয়েক বছর আগে ক্রোম এটিকে যুক্ত করে ফেলেছে, ফিরে এসেছে বলে মনে হচ্ছে ... তবে আর কত দিন?

সর্বাধিক নিকটবর্তী অবস্থানটি হবে: আপনি যদি এটি জাভাস্ক্রিপ্ট স্ক্রিপ্টে রূপান্তর করতে চান তবে একবার স্ক্রোল করার সময় আপেক্ষিক + স্থানাঙ্কগুলি আপডেট হয়

— জি-Cyrillus
সূত্র
4

আমি জানি এটি ইতিমধ্যে উত্তর দেওয়া হয়েছে বলে মনে হয়, তবে আমি একটি নির্দিষ্ট ক্ষেত্রে চলে এসেছি এবং আমার মনে হয় বেশিরভাগ উত্তরগুলির বিন্দুটি মিস হয়।

overflow:hiddenউত্তর মামলার 90% আবরণ। এটি কম-বেশি "স্টিকি ন্যাভ" দৃশ্য।

তবে স্টিকি ব্যবহারটি একটি ধারকের উচ্চতার মধ্যে সবচেয়ে ভাল ব্যবহৃত হয়। আপনার ওয়েবসাইটের ডান কলামে একটি নিউজলেটার ফর্মটি ভাবুন যা পৃষ্ঠাটি দিয়ে স্ক্রল করে। যদি আপনার স্টিকি উপাদানটি ধারকটির একমাত্র সন্তান হয় তবে ধারকটি হুবহু একই আকার এবং স্ক্রোল করার কোনও জায়গা নেই।

আপনার ধারকটির উচ্চতা হওয়া দরকার যা আপনি নিজের উপাদানটির মধ্যে স্ক্রোলের প্রত্যাশা করেন। আমার "ডান কলাম" দৃশ্যে বাম কলামটির উচ্চতা। এটি অর্জনের সর্বোত্তম উপায় হ'ল display:table-cellকলামগুলিতে ব্যবহার করা। আপনি যদি না পারেন এবং float:rightআমি যেমন ছিলাম তেমন আটকে থাকি তবে আপনাকে জাভাস্ক্রিপ্টের সাথে এটির গণনার বাম কলামের উচ্চতা অনুমান করতে হবে।

— ত্রিস্তান এম
সূত্র
2
"যদি আপনার স্টিকি উপাদানটি ধারকটির একমাত্র সন্তান হয় তবে ধারকটি হুবহু একই আকার এবং স্ক্রোল করার কোনও জায়গা নেই।" স্বর্ণ !!! ধন্যবাদ!
— মার্ক জ্যাকসন
হ্যাঁ! এটি বের করার জন্য আমাকে কিছুক্ষণ সময় নিয়েছে। আমি প্রথমে এটি একটি হাস্যকর বিধিনিষেধ পেয়েছি তবে আমি মনে করি এর জন্য কমপক্ষে বিকল্প থাকা উচিত । আমি অনেক ভালো কিছু পছন্দ sticky-limit: parent, sticky-limit: bodyবা sticky-limit: nth-parent(3)আপনি, আপনাকে সীমিত পিতা বা মাতা সেটিং দ্বারা এই সীমাবদ্ধতা উত্তোলন করতে পারেন করতে পারেন: ... যাই হোক display: unsetযেমন উল্লেখ করা হয়েছে, stackoverflow.com/a/60560997/2902367 । এছাড়াও contents, initial(?) এবংinline
— বেন ফিলিপ
3

আমি জানি এটি একটি পুরানো পোস্ট। তবে আমার মতো কেউ যদি সদ্য পজিশনে ঘোরাঘুরি শুরু করেছিলেন: স্টিকি এটি কার্যকর হতে পারে।

আমার ক্ষেত্রে আমি অবস্থানটি ব্যবহার করছিলাম: গ্রিড-আইটেম হিসাবে স্টিকি। এটি কাজ করছে না এবং সমস্যাটি ছিল একটি ওভারফ্লো-এক্স: htmlউপাদানটিতে লুকানো । যত তাড়াতাড়ি আমি property সম্পত্তিটি সরিয়েছি এটি ঠিকঠাক কাজ করেছে। ওভারফ্লো-এক্স থাকা: bodyউপাদানটিতে লুকানো থাকা দেখে মনে হচ্ছে এটি এখনও কার্যকর হয়েছে, কেন এখনও তা জানা যায়নি।

— মার্কো পেরালটা
সূত্র
1

দুটি উত্তর এখানে:

  1. ট্যাগ overflowথেকে সম্পত্তি অপসারণbody

  2. সমস্যাটি সমাধান height: 100%করতে সেট করুনbodyoverflow-y: auto

min-height: 100% পরিবর্তে কাজ করছে না height: 100%

— জাভাদ ইব্রাহিমী
সূত্র
1

আমি বিশ্বাস করি এই নিবন্ধটি কীভাবে সম্পর্কে অনেক কিছু বলেsticky কাজ করে সে

কীভাবে সিএসএসের অবস্থান স্টিকি সত্যই কাজ করে! সিএসএস অবস্থান স্টিকিতে দুটি প্রধান অংশ রয়েছে, স্টিকি আইটেম এবং স্টিকি পাত্রে ।

স্টিকি আইটেম  - হ'ল উপাদান যা আমরা অবস্থানের সাথে সংজ্ঞায়িত করি: স্টিকি স্টাইলগুলি। যখন ভিউপোর্ট পজিশন অবস্থান সংজ্ঞাটির সাথে মেলে তখন উপাদানটি ভাসবে exampletop: 0px ।

স্টিকি পাত্রে এটি এইচটিএমএল উপাদান যা স্টিকি আইটেম মোড়ানো।এটি সর্বাধিক অঞ্চল যেখানে স্টিকি আইটেমটি ভাসতে পারে।

আপনি যখন অবস্থানের সাথে কোনও উপাদানকে সংজ্ঞায়িত করেন: স্টিকি আপনি স্বয়ংক্রিয়ভাবে মূল উপাদানটিকে একটি আঠালো ধারক হিসাবে সংজ্ঞায়িত করছেন!

— yuval.bl
সূত্র
1

একটি স্টিকি উপাদানটির আসল আচরণ হ'ল:

  • প্রথমে এটি কিছু সময়ের জন্য আপেক্ষিক
  • তারপরে এটি কিছু সময়ের জন্য স্থির হয়
  • অবশেষে, এটি দেখুন থেকে অদৃশ্য হয়ে যায়

একটি স্টিলিযুক্ত অবস্থানযুক্ত উপাদানটিকে অপেক্ষাকৃত অবস্থান হিসাবে গণ্য করা হয় যতক্ষণ না এটির ব্লকটি তার প্রবাহের মূলের (অথবা এর মধ্যে যে পাত্রে এটি স্ক্রোল করে থাকে) এর মধ্যে একটি নির্দিষ্ট প্রান্ত (যেমন অটো ব্যতীত অন্য কোনও মূল্যের শীর্ষ স্থাপন করে) অতিক্রম করে, সেই স্থানে এটি "আটকে" হিসাবে বিবেচিত হয় "এটিযুক্ত ব্লকের বিপরীত প্রান্তটি পূরণ না করা পর্যন্ত।

উপাদানটি নথির স্বাভাবিক প্রবাহ অনুযায়ী স্থিত হয় এবং তারপরে শীর্ষ, ডান, নীচে, এবং মানগুলির উপর ভিত্তি করে সারণী-সম্পর্কিত উপাদানগুলি সহ নিকটস্থ স্ক্রোলিং পূর্বসূর এবং ব্লক (নিকটস্থ ব্লক-স্তরের পূর্বপুরুষ) এর সাথে সম্পর্কিত অফসেট থাকে and এবং বামে. অফসেটটি অন্য কোনও উপাদানগুলির অবস্থানকে প্রভাবিত করে না।

এই মানটি সর্বদা একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে। মনে রাখবেন যে একটি স্টিকি উপাদান তার নিকটতম পূর্বপুরুষের সাথে "স্টিক" করে যা "স্ক্রোলিং মেকানিজম" থাকে (যখন ওভারফ্লো লুকানো থাকে, স্ক্রল হয়, অটো বা ওভারলে থাকে তখন তৈরি হয়), এমনকি যদি সেই পূর্বপুরুষটি প্রকৃতপক্ষে স্ক্রোলিং পূর্বসূর না হয়।

এই উদাহরণটি আপনাকে বুঝতে সাহায্য করবে:

code https://codepen.io/darylljann/pen/PpjwPM

— জুয়ানমা মেনেনডেজ
সূত্র
0

যদি ডান্ডায় 74's এর ফিক্সটি কাজ করে না, তবে প্যারেন্টের উপাদানটির উচ্চতা আছে কিনা তা পরীক্ষা করুন।

আমার ক্ষেত্রে আমার দুটি বাচ্চা ছিল, একটি ভাসমান বাম এবং একটি ভাসমান ডানদিকে। আমি চেয়েছিলাম সঠিক ভাসমান ব্যক্তিকে স্টিকি হয়ে উঠতে <div style="clear: both;"></div>হবে তবে উচ্চতা দেওয়ার জন্য পিতামাতার শেষে একটি যুক্ত করতে হয়েছিল।

— ফ্লো
সূত্র
কেন কারও দ্বারা এটি হ্রাস পেয়েছে তা নিশ্চিত করুন না তবে এটি আমার ক্ষেত্রে ঠিক ছিল: আমি float:leftপ্যারেন্ট উপাদানগুলিতে যুক্ত করেছি (ভাসা ছাড়াই এর উচ্চতা 0 ছিল) এবং position:stickyকাজ করেছি।
— এক্সেল
0

আমি একটি জেএস সমাধান ব্যবহার করেছি। এটি ফায়ারফক্স এবং ক্রোমে কাজ করে। কোন সমস্যা, আমাকে জানাবেন।

এইচটিএমএল

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

CSS

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

JS

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}
— কার্ল ব্রুবেকার
সূত্র
0

z-indexএছাড়াও খুব গুরুত্বপূর্ণ। কখনও কখনও এটি কাজ করবে তবে আপনি এটি দেখতে পাবেন না। এটি নিশ্চিত হওয়ার জন্য এটি খুব উচ্চ সংখ্যায় সেট করার চেষ্টা করুন। সর্বদা রাখবেন না top: 0তবে কোথাও লুকিয়ে থাকলে (টুলবারের নীচে) কিছু উচ্চতর চেষ্টা করুন।

— রেক্সিন হোকশা
সূত্র
0

এখানে যা আমাকে ট্রিপ করে চলেছে ... আমার স্টিকি ডিভটি অন্য ডিভের ভিতরে ছিল যাতে স্টিটি ডিভের পরে পিতামাতার ডিভকে "লম্বা যথেষ্ট" হিসাবে অন্যান্য বিষয়বস্তুকে "স্লাইড ওভার" করার জন্য আঠালো ডিভের জন্য কিছু অতিরিক্ত সামগ্রীর প্রয়োজন ছিল আপনি নীচে স্ক্রোল।

সুতরাং আমার ক্ষেত্রে, ঠিক স্টিকি ডিভের পরে, আমাকে যুক্ত করতে হয়েছিল:

    %div{style:"height:600px;"} 
      &nbsp;

(আমার অ্যাপ্লিকেশনটির দুটি পাশ দিয়ে ডিভস রয়েছে, বামদিকে একটি "লম্বা" চিত্র রয়েছে এবং ডানদিকে একটি সংক্ষিপ্ত তথ্য এন্ট্রি ফর্ম রয়েছে এবং আপনি নীচে স্ক্রোল করার সাথে সাথে আমি ডাটা এন্ট্রি ফর্মটি ইমেজের পাশে ভাসতে চাইছি, সুতরাং ফর্মটি সর্বদা স্ক্রিনে থাকে I আমি উপরের "অতিরিক্ত সামগ্রী" যোগ না করা পর্যন্ত এটি কাজ করবে না যাতে স্টিকি ডিভের "স্লাইড ওভার" কিছু আছে

— jpw
সূত্র
-1

এটি সত্য যে overflowপ্রয়োজনগুলি সরানো বা সন্তানের উপাদানগুলিতে কাজ initialকরার জন্য সেট করা দরকার position: sticky। আমি আমার কৌণিক অ্যাপে ম্যাটারিয়াল ডিজাইন ব্যবহার করেছি এবং জানতে পেরেছিলাম যে কিছু উপাদান উপাদানগুলির overflowমান পরিবর্তন করেছে । আমার দৃশ্যের জন্য স্থির

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}
— আনহ এনগুইন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.