স্থির অবস্থান তবে ধারক সম্পর্কিত

639

আমি একটি ঠিক করার চেষ্টা করছি divযাতে এটি সর্বদা পর্দার উপরের দিকে লেগে থাকে, এটি ব্যবহার করে:

position: fixed;
top: 0px;
right: 0px;

তবে এটি divএকটি কেন্দ্রিক ধারকটির ভিতরে রয়েছে inside আমি যখন position:fixedএটি ব্যবহার করি divএটি ব্রাউজার উইন্ডোটির তুলনামূলকভাবে ঠিক করে , যেমন এটি ব্রাউজারের ডান দিকের বিপরীতে। পরিবর্তে, এটি ধারকটির তুলনায় স্থির করা উচিত।

আমি জানি যে এটির সাথে position:absoluteসম্পর্কিত কোনও উপাদান ফিক্স করতে ব্যবহার করা যেতে পারে div, তবে আপনি পৃষ্ঠাটি স্ক্রোল করার সময় উপাদানটি অদৃশ্য হয়ে যায় এবং শীর্ষে আটকে থাকে না position:fixed।

এটি অর্জন করার জন্য কি কোনও হ্যাক বা কর্মসূচী রয়েছে?

css  position  css-position  fixed 
— জ্যাক নিকোডেমাস
সূত্র
"টিথার একটি নিম্ন-স্তরের ইউআই লাইব্রেরি যা অন্য কোনও উপাদানগুলির পাশে একটি পৃষ্ঠায় যে কোনও উপাদান অবস্থান করতে ব্যবহার করা যেতে পারে" " tithher.io এ github.com/shipshapecode/tether + Demos / ডক্স
— কাই

উত্তর:

407

সংক্ষিপ্ত উত্তর: না। (সিএসএস রূপান্তর দিয়ে এটি এখন সম্ভব possible নীচের সম্পাদনাটি দেখুন)

দীর্ঘ উত্তর: "স্থির" অবস্থান নির্ধারণের ক্ষেত্রে সমস্যাটি হ'ল এটি উপাদানটিকে প্রবাহের বাইরে নিয়ে যায় । সুতরাং এটি তার পিতামাতার সাথে তুলনামূলকভাবে পুনরায় অবস্থান করা যায় না কারণ এটির মতো এটির কোনও নেই। তবে, ধারকটি যদি একটি নির্দিষ্ট, জ্ঞাত প্রস্থের হয় তবে আপনি এর মতো কিছু ব্যবহার করতে পারেন:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

সম্পাদনা (03/2015):

এটি পুরানো তথ্য। সিএসএস 3 ট্রান্সফর্মের যাদুটির সাহায্যে এখন একটি গতিশীল আকারের (অনুভূমিকভাবে এবং উল্লম্বভাবে) সামগ্রীর কেন্দ্রস্থল করা সম্ভব। একই নীতিটি প্রয়োগ হয়, তবে আপনার ধারকটিকে অফসেট করার জন্য মার্জিন ব্যবহারের পরিবর্তে আপনি ব্যবহার করতে পারেন translateX(-50%)। এটি উপরের মার্জিন ট্রিকটির সাথে কাজ করে না কারণ প্রস্থ নির্ধারণ না করা হলে আপনি এটি কতটা অফসেট করতে জানেন না এবং আপনি আপেক্ষিক মানগুলি (যেমন 50%) ব্যবহার করতে পারবেন না কারণ এটি পিতামাতার সাথে সম্পর্কিত হবে এবং এর উপাদানটির সাথে নয় আবেদন করা. transformঅন্যরকম আচরণ করে। এর মানগুলি সেই উপাদানটির সাথে সম্পর্কিত যা তারা প্রয়োগ করা হয়। সুতরাং, 50%জন্য transformমানে অর্ধেক উপাদান প্রস্থ, যখন 50%মার্জিন জন্য বাবা-মার প্রস্থের অর্ধেক। এটি একটি আই 9 9 সমাধান

উপরের উদাহরণে অনুরূপ কোড ব্যবহার করে, আমি সম্পূর্ণ গতিশীল প্রস্থ এবং উচ্চতা ব্যবহার করে একই দৃশ্যটি পুনরায় তৈরি করেছি:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

আপনি যদি এটি কেন্দ্রিক করে রাখতে চান তবে আপনি এটিও করতে পারেন:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

ডেমোস:

jsFiddle: কেন্দ্রীভূত অনুভূমিকভাবে শুধুমাত্র
jsFiddle: কেন্দ্রীভূত উভয় অনুভূমিকভাবে এবং উল্লম্বভাবে
মূল ক্রেডিট ব্যবহারকারী যায় aaronk6 আমার কাছে এটা ইশারা জন্য এই উত্তর

— জোসেফ মেরিকলে
সূত্র
আমার জন্য সুন্দর কাজ করেছেন। যদিও আমার বামে এবং ইতিমধ্যে কেন্দ্রিক, অপরিশোধিত ডিভের জন্য আমার দরকার ছিল, তাই এটি সংযুক্ত না হওয়া পর্যন্ত কেবল বাম মার্জিন হ্রাস করতে হয়েছিল। উইন্ডোগুলির প্রস্থ যাই হোক না কেন কোনও প্রান্তিককরণ স্থির থাকে না। ধন্যবাদ। +1
— আয়েন এম নরম্যান
9
@ জোসেফ কোন ধারণা position:fixedনির্দিষ্ট topবা left কখনও কখনও কাজ না করে কেন ? কিছু ব্রাউজার সেই উপাদানটিকে ডিফল্ট হিসাবে উপস্থিত হয় যেখানে এটি সাধারণত অবস্থান করে যদি এটির স্বাভাবিক অবস্থান থাকে। stackoverflow.com/questions/8712047/…
— ফ্ল্যাশ
2
স্থির উচ্চতা এবং প্রস্থ ছাড়া কি? আমার ক্ষেত্রে আমি কোনও ধারককে এমনকি বডি ট্যাগ পর্যন্ত কোনও সংকেত প্রস্থ দিইনি। কি সমাধান আপনি আমাকে বলতে হবে।
— এমএফকিউ
1
@ এমএফকিউ দুর্ভাগ্যক্রমে, এই পদ্ধতিটি একটি পরিচিত উচ্চতা এবং প্রস্থ ছাড়া মোটেও কাজ করবে না। আপনি যা যাচ্ছেন তা মূলত আপনি যা কেন্দ্র করে যাচ্ছেন তার উপর নির্ভর করবে will এটি যদি কোনও চিত্র হয় তবে এটি 100% x 100% ধারকটির পটভূমি হিসাবে ব্যবহার করুন। যদি এটি কোনও আসল উপাদান যা সম্পূর্ণ গতিময় হয় তবে আপনাকে সম্ভবত জাভাস্ক্রিপ্ট সমাধান ব্যবহার করে অনাবল্যে পৌঁছাতে হবে।
— জোসেফ মেরিকলে
2
আমি খুঁজে পেয়েছি যে left:inheritস্থির অবস্থানের উপাদানটি যুক্ত করা ব্রাউজারকে পিতামাতার অফসেটকে সম্মান করতে বাধ্য করতে পারে।
— উইলস্টার
180

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

এটি আপনাকে যে কোনও পরিস্থিতিতে মোকাবেলা করতে দেবে:

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

উদাহরণ স্বরূপ:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}
<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>
স্নিপেট প্রসারিত করুন

দুঃখজনকভাবে, আমি আশা করছিলাম যে এই থ্রেডটি অ্যান্ড্রয়েডের ওয়েবকিট রেন্ডারিং বাক্স-শ্যাডো ব্লগার পিক্সেলের সাথে স্থির অবস্থানের উপাদানগুলিতে মার্জিন হিসাবে সমাধান করবে তবে এটি মনে হয় এটি একটি বাগ।
যাইহোক, আমি আশা করি এটি সাহায্য করে!

— গ্রিম ব্ল্যাকউড
সূত্র
1
পুরোপুরি কোনও দৃশ্য নয় তবে এটি একটি ভাল শুরু। নীচে যদি অনেকগুলি জায়গা থাকে তবে র্যাপার তারপরে আপনার। ফিক্সড-মোড়কটি পিতামাতার নীচে শেষ হবে তবে আপনার। ফিক্সড উপাদানটি উভয় ধারক থেকে এবং নীচের যে কোনও সামগ্রীতে প্রবাহিত হতে থাকবে। যেমনটি আমি বলেছিলাম, এটি একটি ভাল শুরু, নিখুঁত নয়, তবে কিছু জেএস ছাড়া এটি কীভাবে সম্পন্ন করা যায় তা আমি দেখছি না।
— o_O
4
এটি তরল ডিজাইনের সাথে ভাল খেলছে না।
— জুহাইব আলী
3
আমি এটি করার চেষ্টা করেছিলাম, তবে এবং যখন আমি নীচে স্ক্রোল করলাম তখন আমি যে শিরোনামটি স্থির করেছি (ঠিক সেই পিতা-মাতার সাথে যাঁর আত্মীয় ছিলেন) আমি স্থির করেছিলাম না i
— মরীচিকা
এটি আমার জন্য ক্রোমিয়াম এবং ফায়ারফক্সে শীর্ষ-ডান ডিভ নিয়ে কাজ করেছিল, স্থির ডিভের উল্লম্ব অবস্থানগুলি পৃথক ছিল (ক্রোমিয়ামে এটি প্যারেন্ট ডিভের শীর্ষে ছিল, ফায়ারফক্সের ভিতরে এটি ছিল)।
— ড্যামিয়েন
2
এই ছিল আমার জন্য উত্তর! ধন্যবাদ @ গ্রেইম ব্ল্যাকউড
— ট্যাবু.নেট
136

হ্যাঁ, চশমা অনুসারে, একটি উপায় আছে।

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

আমি দুর্ঘটনাক্রমে লক্ষ করেছি যে আবেদন করার সময়

-webkit-transform: translateZ(0);

শরীরে, এটি তার সাথে তুলনামূলকভাবে একটি নির্দিষ্ট শিশু তৈরি করেছে (ভিউপোর্টের পরিবর্তে)। সুতরাং আমার স্থির উপাদান leftএবং topবৈশিষ্ট্যগুলি এখন ধারকটির সাথে আপেক্ষিক।

সুতরাং আমি কিছু গবেষণা করেছি এবং দেখেছি যে বিষয়টি ইতিমধ্যে এরিক মায়ার দ্বারা আচ্ছাদিত ছিল এবং এমনকি এটি যদি "কৌশল" বলে মনে হয় তবে দেখা যাচ্ছে যে এটি বৈশিষ্ট্যের অংশ:

সিএসএস বক্স মডেল দ্বারা যার লেআউটটি নিয়ন্ত্রিত হয় সেই উপাদানগুলির জন্য, স্ট্যাকিং প্রসঙ্গ এবং একটি সমন্বিত ব্লক উভয় তৈরিতে রূপান্তর ফলাফলের জন্য কোনওটি ছাড়া অন্য কোনও মান। অবজেক্ট স্থির অবস্থানের বংশধরদের জন্য একটি ব্লক হিসাবে কাজ করে।

http://www.w3.org/TR/css3-transforms/

সুতরাং, আপনি যদি কোনও পিতামাতার উপাদানগুলিতে কোনও রূপান্তর প্রয়োগ করেন তবে এটি ধারণকারী ব্লকে পরিণত হবে।

কিন্তু ...

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

একই আচরণটি সাফারি, ক্রোম এবং ফায়ারফক্সে পাওয়া যাবে তবে আইই ১১ এ নয় (যেখানে স্থির উপাদান এখনও স্থির থাকবে)।

আরেকটি আকর্ষণীয় (অননুমোদিত) জিনিসটি হ'ল যখন কোনও নির্দিষ্ট উপাদান কোনও রূপান্তরিত উপাদানের অভ্যন্তরে থাকে topএবং এর leftবৈশিষ্ট্যগুলি এখন ধারকটির সাথে সম্পর্কিত হবে, box-sizingসম্পত্তির প্রতি শ্রদ্ধা জানায় , তখন এর স্ক্রোলিং প্রসঙ্গটি উপাদানটির সীমানা জুড়ে প্রসারিত হবে, যেন বাক্সটি -সাইজিং সেট করা হয়েছিল border-box। সেখানে কিছু সৃজনশীলতার জন্য, এটি সম্ভবত একটি খেলনা হয়ে উঠতে পারে :)

পরীক্ষা

— ফ্রান্সেসকো ফ্রেপ্পোর্টি
সূত্র
4
— Zach Sauceer
দুর্দান্ত, এটি ক্রোমে আমার জন্য কাজ করে। আইই তে এটি কীভাবে অর্জন করবেন সে সম্পর্কে কোনও ধারণা? আমি ট্রান্সলেটজেড ব্যবহার করার চেষ্টা করেছি কিন্তু এটি কোনও সংস্করণের নয় didn't
— আনিস প্যাটেল
একই .. আইআই তে এটি কীভাবে করা যায় কেউ জানেন? ব্রাউজার সনাক্ত করার জন্য এটির মতো বেদনা, তারপরে পদ্ধতিগতভাবে প্রদর্শন করা বা না দেখানো left:(তা বিবেচনা করে দেখে মনে হচ্ছে)
— টালবয়
আমি কেবল বিপরীত শর্তটি পূরণ করি যা আমার আপেক্ষিক ধারক মধ্যে স্থির প্রয়োজন তবে সম্পত্তির রূপান্তর দ্বারা পরিবর্তিত হয়েছে। আপনার উত্তরটি খুব সহায়ক, আপনাকে ধন্যবাদ!
— mytharcher
8
@ ফ্রেঞ্চসো ফ্রেপ্পোর্টি মনে হয় এটি আর ক্রোমের সর্বশেষতম সংস্করণে (সংস্করণ 42.0.2311.90) :(
— জেঞ্জ্প
60

উত্তর হ্যাঁ, যতক্ষণ আপনি সেট না করেন left: 0বা right: 0আপনার ডিভ অবস্থানটি স্থির করে দেওয়ার পরে।

http://jsfiddle.net/T2PL5/85/

সাইডবার ডিভিউ চেকআউট করুন। এটি স্থির, তবে পিতা-মাতার সাথে সম্পর্কিত, উইন্ডো ভিউ পয়েন্টের সাথে নয়।

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>
— Shadow_boi
সূত্র
12
এটি আরও বেশি পরিমাণে না পাওয়ার কোনও কারণ? আমার কাছে সবচেয়ে সুস্পষ্ট সমাধান মনে হচ্ছে।
— ট্রেস করুন
ক্রস ব্রাউজার সামঞ্জস্যতা সম্পর্কে কি। আপনারা কেউ এটি পরীক্ষা করেছেন?
— আলেকজান্দার বুলেলিয়ার
3
এটি সঠিক তবে কেবলমাত্র নির্দিষ্ট উপাদানের 'অবস্থান নির্ধারণের' জন্য। এটি ধারক প্রস্থকে সম্মান করবে না বা কোনওভাবেই আকার পরিবর্তন করবে না। উদাহরণস্বরূপ, যদি আপনার সর্বাধিক প্রস্থ: 1000px সহ তরল র‍্যাপার থাকে; মার্জিন: স্বয়ং; এটি কাজ করবে না। যদি সবকিছু স্থির প্রস্থ হতে পারে তবে হ্যাঁ এটি আপনার সমস্যার সমাধান করবে।
— Rhys
3
@ অ্যালেক্সানড্রেউলিয়ার হ্যাঁ, এটি কমপক্ষে ক্রোম, ফায়ারফক্স এবং আই 11 এ একটি নির্দিষ্ট উপাদান জন্য আমার পক্ষে ভাল কাজ করেছে।
— জেসন ফ্র্যাঙ্ক
নিখুঁতভাবে কাজ করেছেন। মার্জিন-বাম যোগ করতে হয়েছিল: উপাদানটি কনটেইনার ডানে আনার জন্য X%
— আনন্দ
45

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

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

https://developers.google.com/web/updates/2016/12/position-sticky

আরও বিশদগুলি আপনার অবতরণগুলিকে আটকে দিন! অবস্থান: ওয়েবকিটে স্টিকি জমি ।

— PoseLab
সূত্র
এটি জীবনকে এত সহজ করে তোলে, একমাত্র সমস্যা হ'ল ইন্টারনেট এক্সপ্লোরার বা এজ 15 এবং পূর্ববর্তী সংস্করণগুলিতে স্টিকি সমর্থনযোগ্য নয়।
— রিক্স
1
position:stickyমহান. আইই ক্যানিউজ.com
— #
হ্যাঁ, এত পুরানো এপি, এবং আপনি আমার দিন বাঁচান ... আমি এটি ফ্লেক্স টেবিলের জন্য স্থির কলামগুলির জন্য ব্যবহার করছি।
— ভ্লাদিস্লাভ গ্রিতসেনকো
1
"তার পিতামাতার মধ্যে" - পিতামাতারা স্ক্রল আপ অদৃশ্য হয়ে গেলে কি শীর্ষে থাকা সম্ভব?
— ফিক্রেট
28

2019 সমাধান: আপনি position: stickyসম্পত্তি ব্যবহার করতে পারেন ।

এখানে কোডেপেন একটি উদাহরণ রয়েছে যা ব্যবহারটি প্রদর্শন করে এবং এটির থেকে কীভাবে পৃথক হয় position: fixed।

এটি কীভাবে আচরণ করে তা নীচে ব্যাখ্যা করা হয়েছে:

  1. ব্যবহারকারীর স্ক্রোল অবস্থানের উপর ভিত্তি করে স্টিকি অবস্থান সহ একটি উপাদান অবস্থিত। এটি মূলত এটির মতো কাজ করে position: relativeযতক্ষণ না কোনও উপাদান কোনও নির্দিষ্ট অফসেটের বাইরে স্ক্রোল করা হয়, এক্ষেত্রে এটি অবস্থানে পরিণত হয়: স্থির। এটি যখন আবার স্ক্রোল করা হয় তখন এটি পূর্ববর্তী (আপেক্ষিক) অবস্থানে ফিরে আসে।

  2. এটি পৃষ্ঠায় অন্যান্য উপাদানগুলির প্রবাহকে প্রভাবিত করে অর্থাৎ পৃষ্ঠায় একটি নির্দিষ্ট স্থান দখল করে (ঠিক যেমন position: relative)।

  3. যদি এটি কোনও ধারকের অভ্যন্তরে সংজ্ঞায়িত করা হয় তবে এটি সেই ধারকটির প্রতি শ্রদ্ধা রেখে অবস্থান করে। ধারকটির যদি কিছু ওভারফ্লো (স্ক্রোল) থাকে তবে স্ক্রোল অফসেটের উপর নির্ভর করে এটি অবস্থানে পরিণত হয়: স্থির।

সুতরাং আপনি যদি স্থির কার্যকারিতা অর্জন করতে চান তবে কোনও ধারকটির অভ্যন্তরে, স্টিকি ব্যবহার করুন।

— প্রাণ তিওয়ারি
সূত্র
সুন্দর সমাধান। আমি position: stickyএখনও সম্পর্কে জানতাম না । অনেক সাহায্য করেছে, ধন্যবাদ!
— dave0688
আমি এই পোস্ট প্রায় ছিল। ভাল উত্তর! চটচটে উপায়।
— ডিসেলনার
18

ঠিক উপরের এবং বাম শৈলীর স্থির অবস্থান ডিভের বাইরে নিয়ে যান। এখানে একটি উদাহরণ

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div>

প্যারেন্ট ডিভ যেখানেই বসবে সেখানে # কনটেন্ট ডিভটি বসবে তবে সেখানে ঠিক করা হবে।

— hobberwickey
সূত্র
3
বিয়োগ কেন? এটি ডিওমের প্রবাহে যেখানেই চান কোনও উপাদান ঠিক করার জন্য পুরোপুরি কাজ করে। মারাত্মক কিত্তন.ফেসটস
— ফিক্সডপজিশন
18

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

এই jQuery প্লাগইনটির লিঙ্কটি এখানে এই সমস্যাটি সমাধান করতে পারে:

https://github.com/bigspotteddog/ScrollToFixed

এই প্লাগইনটির বর্ণনা নিম্নরূপ:

পৃষ্ঠার শীর্ষে উপাদানগুলি ঠিক করতে এই প্লাগইনটি ব্যবহার করা হয়, যদি উপাদানটি উল্লম্বভাবে স্ক্রোল করা না হত; যাইহোক, এটি উপাদানটিকে অনুভূমিক স্ক্রোল দিয়ে বাম বা ডানদিকে চলতে দেয়।

একটি বিকল্প মার্জিনটপ দেওয়া হয়েছে, উলম্ব স্ক্রোলটি লক্ষ্য অবস্থানে পৌঁছানোর পরে উপাদানটি উল্লম্বভাবে উপরের দিকে অগ্রসর হওয়া বন্ধ করবে; তবে পৃষ্ঠাটি বাম বা ডানদিকে স্ক্রোল করা হওয়ায় উপাদানটি অনুভূমিকভাবে সরবে। পৃষ্ঠার লক্ষ্য স্থিতিটি পাস করার পরে আবার স্ক্রোল হয়ে গেলে উপাদানটি পৃষ্ঠায় তার মূল অবস্থানে পুনরুদ্ধার করা হবে।

এই প্লাগইনটি ফায়ারফক্স 3/4, গুগল ক্রোম 10/11, সাফারি 5, এবং ইন্টারনেট এক্সপ্লোরার 8/9 তে পরীক্ষা করা হয়েছে।

আপনার নির্দিষ্ট ক্ষেত্রে ব্যবহার:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});
— bigspotteddog
সূত্র
12

আমার ক্লায়েন্টটি সামগ্রীর ক্ষেত্রের বাইরে বসে থাকতে চেয়েছিল এমন বিজ্ঞাপন দিয়ে আমাকে এটি করতে হয়েছিল। আমি কেবল নিম্নলিখিতটি করেছিলাম এবং এটি একটি কবজির মতো কাজ করেছে!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>
— এরিক কে
সূত্র
আমার বিজ্ঞাপনটি 140px প্রশস্ত ছিল, তাই ওয়েবসাইট ফ্রেমের প্রান্তের বিপরীতে সামান্য কিছুটা ডান মার্জিন দেওয়ার জন্য আমি এটি 150px বামে সরাল।
— এরিক কে
7

দুটি HTML উপাদান এবং খাঁটি সিএসএস (আধুনিক ব্রাউজারগুলি)

এই jsFizz উদাহরণ দেখুন।পুনরায় আকার দিন এবং দেখুন যে স্থির উপাদানগুলি কীভাবে ভাসমান উপাদানগুলিতে থাকে সেগুলি নিয়ে কীভাবে সরে যায় the ভিতরে স্ক্রোলটি কোনও সাইটে কীভাবে কাজ করবে তা দেখতে সর্বাধিক-সর্বাধিক স্ক্রোল বারটি ব্যবহার করুন (স্থির উপাদান স্থির থাকা)।

এখানে বিবৃত আছে, একটা চাবি কোন অবস্থানগত সেটিংস সেট করা নেই fixedউপাদান (কোন top, right, bottom, অথবাleft মান)।

পরিবর্তে, আমরা সমস্ত স্থির উপাদানগুলি রেখেছি (নোট করুন যে শেষ বাক্সটি কীভাবে তার চারটি রয়েছে) বাক্সে সেগুলি স্থাপন করা উচিত, যেমন:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

তারপরে আমরা তাদের ধারক সম্পর্কিত তাদের ব্যবহার margin-topএবং margin-left"সরানোর" জন্য, এই CSS এর মতো কিছু:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

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

মোড়ক স্থিতিশীল , আপেক্ষিক , বা অবস্থানের ক্ষেত্রে নিখুঁত হোক তা বিবেচ্য নয়।

— Scotts
সূত্র
3

আপনি আমার jQuery প্লাগইন চেষ্টা করতে পারেন, ফিক্সটো ।

ব্যবহার:

$('#mydiv').fixTo('#centeredContainer');
— Burak
সূত্র
2

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

— বেটো আভেগা
সূত্র
2

খাঁটি সিএসএসের সাহায্যে আপনি এটি পরিচালনা করতে পারবেন না; কমপক্ষে আমি না। তবে আপনি এটি খুব সহজভাবে jQuery দিয়ে করতে পারেন। আমি আমার সমস্যাটি ব্যাখ্যা করব এবং কিছুটা পরিবর্তন করে আপনি এটি ব্যবহার করতে পারেন।

সুতরাং শুরু করার জন্য, আমি চেয়েছিলাম যে আমার উপাদানটির একটি স্থির শীর্ষ (উইন্ডোর উপরে থেকে), এবং বাম উপাদানটি পিতামণ্ডলের উপাদান থেকে উত্তরাধিকারী হয় (কারণ পিতামাত উপাদান কেন্দ্রিক)। বাম উপাদানটি সেট করতে, কেবলমাত্র আপনার উপাদানটিকে পিতামাতার মধ্যে রাখুন এবং position:relativeপিতামাতার উপাদানটির জন্য সেট করুন ।

তারপরে আপনাকে জানতে হবে যখন আপনার স্ক্রোল বার শীর্ষে থাকবে তখন আপনার উপাদানটি শীর্ষ থেকে কত হবে (y শূন্যে স্ক্রোলড); আবার দুটি বিকল্প আছে। প্রথমটি হ'ল স্থির (কিছু নম্বর) বা আপনাকে এটি প্যারেন্ট উপাদান থেকে পড়তে হবে।

আমার ক্ষেত্রে এটি শীর্ষ স্থিতিশীল থেকে 150 পিক্সেল। সুতরাং আপনি যখন 150 দেখবেন যখন শীর্ষস্থান থেকে উপাদানটি কতটা যখন আমরা স্ক্রোল না করি।

সিএসএস

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery এর

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});
— মিঃ ব্র
সূত্র
সমস্যাটি হচ্ছে স্ক্রল করার সময় প্রশ্ন ফ্লিকারে ডিভ।
— vvohra87
সম্ভবত কারণ স্ক্রোলিং খুব বেশি বা খুব দ্রুত সতেজ হয়। আমার সমস্যাটি টিবিএইচ ছিল না, তবে আমি আপনাকে বিশ্বব্যাপী "ব্লকার" ব্যবহার করে চেষ্টা করার পরামর্শ দিতে পারি যা উদাহরণস্বরূপ প্রতি 10 মিমি বা কিছু সময় রিফ্রেশ হবে এবং আপনি যখন কোনও উচ্চতা পরিবর্তন করবেন তখন প্রতিবার ব্লকিং মানকে সেট করতে পারেন set অবশ্যই আপনাকে। স্ক্রোল ইভেন্টের শর্তটি যোগ করতে হবে যা এই সময়কালে (10 মিমি) আপনি ইতিমধ্যে ডিভ স্ক্রোল করে কিনা তা পরীক্ষা করে দেখছে। আমি পুনরাবৃত্তি করেছি আমি চেষ্টা করি নি তবে আমি বিশ্বাস করি এটি কার্যকর হতে পারে :) এইভাবে আপনি ডিভিশনকে এটির অবস্থান পরিবর্তন করা থেকে খুব বেশি থামাতে পারেন যাতে কম্পিউটারটি আসলে অনুসরণ করতে পারে না, এবং যথেষ্ট পরিমাণে মানব চোখ এটি দেখে।
— মিঃ বিআর
আমি ইতিমধ্যে আপনার উত্তরটি +1 সঙ্গী দিয়েছি;) একটি বৈশ্বিক লুপিং পদ্ধতি সংযুক্ত করার ব্যথা সত্যিই পারফরম্যান্স। পুরানো পিসি এবং ট্যাবলেটগুলিতে সুন্দরভাবে কাজ করা এমন কিছু পাওয়ার জন্য বেদনাদায়ক। অনেক সময় কর্মস্থলে একজন জুনিয়র দেব এই জাতীয় পদ্ধতির ভিতরে একটি 'ভ্যার এক্স' লিখেছিলেন যার ফলে পৃষ্ঠাটি খুব বেশি খোলা রাখলে অযথা মেমরি ফাঁস হয়: পি তবে হ্যাঁ আপনার পরামর্শটি কেবল একমাত্র আসল বিকল্প হিসাবে মনে হচ্ছে ।
— vvohra87
আপনি গ্লোবাল লুপগুলির সাথে পয়েন্ট পেয়েছেন; ভাল না, আমি রাজি। আমি কেবল এই ধরণের সমস্যাগুলি সম্পর্কে ভাবতে চাই, সে কারণেই আমি আরও একটি পরামর্শ লিখেছিলাম :) টিবিএইচ, এখন এটি আরও ভাল দেখায়, আমি এটিকে এড়াতে পারব এক্সডি আমি এখনই আরও একটি সমাধান পেয়েছি। আপনি স্ক্রোল ইভেন্টে সেটটাইমআউট () সেট করার বিষয়ে যা বলছেন যা ফানকে ডাকে। এটি ডিভ গতিশীল করে তোলে..এছাড়াও আপনি গ্লোবাল ব্লকার ব্যবহার করেন যা টাইমআউট অপেক্ষা করার সময় সত্য হিসাবে সেট করা থাকে এবং যখন টাইমআউট বলা হয় আপনাকে ব্লকারকে মিথ্যা হিসাবে ফিরিয়ে দেয় যা কিছু সময়ের পরে অন্য কল সক্ষম করে ... আপনি গ্লোবাল লুপ ব্যবহার করবেন না তবে ডিভ গতির ফ্রিকোয়েন্সিতে এখনও নিয়ন্ত্রণ রয়েছে control
— মিঃ আরআর
এটি আরও মার্জিত তবে আমি এটি গ্রহণ করা কঠিন বলে মনে করি। এইচটিএমএল এবং সিএসএস স্পেকগুলি টিবিএইচ হ্যান্ডেল করার আমি প্রত্যাশা করি। জেএস প্রথম স্থানের সাথে জড়িত এই সত্যটি ঘৃণা করুন!
— vvohra87
1

এটি সহজ (নীচের এইচটিএমএল অনুসারে)

কৌশলটি হ'ল "অবস্থান: স্থির;" সহ উপাদান (ডিভ) এর উপরে বা বাম ব্যবহার না করা। যদি এগুলি নির্দিষ্ট না করা হয় তবে "স্থির সামগ্রী" উপাদানটি ঘেরযুক্ত উপাদানটির সাথে আপেক্ষিকভাবে উপস্থিত হবে (ডিভের সাথে "অবস্থান: আপেক্ষিক;") ইনস্টল করা ব্রাউজার উইন্ডোটির তুলনায় !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

উপরে আমাকে উল্লম্ব স্ক্রোলিং সহ একটি ডিভিতে প্রচুর পাঠ্যের শীর্ষে একটি ক্লোজিং "এক্স" বোতামটি সনাক্ত করতে দেয়। "এক্স" স্থানে বসে (স্ক্রোলযুক্ত পাঠ্য সহ সরানো হয় না এবং তবুও এটি ব্রাউজার উইন্ডোটির প্রস্থের আকার পরিবর্তন করে যখন বদ্ধ বা ডিভ কন্টেইনারটি দিয়ে বাম বা ডানে সরে যায়! সুতরাং এটি উল্লম্বভাবে "স্থির" করা হয়েছে, তবে তুলনামূলকভাবে সম্পর্কিত) অনুভূমিক উপাদান অনুভূমিকভাবে!

আমি এই কাজটি করার আগে যখন আমি পাঠ্য সামগ্রীটি নীচে স্ক্রোল করেছিলাম তখন "এক্স" স্ক্রোল করে চোখের সামনে।

আমার জাভাস্ক্রিপ্ট হাইডডিভ () ফাংশনটি না দেওয়ার জন্য দুঃখিত, তবে এটি অযথা এই পোস্টটিকে আরও দীর্ঘায়িত করবে। আমি এটিকে যতটা সম্ভব সংক্ষিপ্ত রাখতে পছন্দ করেছি।

— ব্রুস অ্যালেন
সূত্র
সলিড ক্রস-ব্রাউজার সমাধান, আইএম 8-তে কবজির মতো কাজ করে।
— dmi3y
1

ট্রান্সফর্ম ব্যবহার করে কীভাবে এটি কাজ করে তা ডিমেস্ট্রেটের জন্য আমি একটি জিসফিল তৈরি করেছি।

এইচটিএমএল

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

সিএসএস

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery এর

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

— ওয়েন
সূত্র
1

আমার একই সমস্যা আছে, আমাদের দলের একজন আমাকে সমাধান দেয়। ডিভ ফিক্স অবস্থানের অনুমতি এবং অন্যান্য ডিভের তুলনায়, আমাদের সমাধানটি হ'ল ফাদার কনটেয়ারটি ফিক্স ডিভ এবং স্ক্রোল ডিভটি মোড়ক ব্যবহার করুন।

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

CSS

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}
— Jay0Lu
সূত্র
1 
/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}
— ক্যারল ম্যাকে
সূত্র
1

হ্যাঁ যতক্ষণ সম্ভব আপনি আপনার উপাদানটির অবস্থান ( topবা left, ইত্যাদি) সেট না করেন ততক্ষণ সম্ভব ( যদিও আপনি কোনও আপেক্ষিক অবস্থান সেট fixedকরতে ব্যবহার marginকরতে পারেন )। সাইমন বোস কিছুক্ষণ আগে এ সম্পর্কে পোস্ট করেছেন ।

তবে স্থির উপাদানটি অ-স্থির আত্মীয়দের সাথে স্ক্রোল করার আশা করবেন না।

এখানে একটি ডেমো দেখুন ।

— Javarome
সূত্র
0

আমি কিছুক্ষণ আগে এমন কিছু করেছি। আমি জাভাস্ক্রিপ্টে বেশ নতুন ছিলাম, তাই আমি নিশ্চিত আপনি আরও ভাল করতে পারবেন তবে এখানে একটি সূচনা পয়েন্ট:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

আপনাকে আপনার প্রস্থ নির্ধারণ করতে হবে এবং তারপরে এটি উইন্ডোটির প্রস্থ পায় এবং প্রতি কয়েক সেকেন্ডে মার্জিন পরিবর্তন করে। আমি জানি এটি ভারী, তবে এটি কার্যকর।

— webLacky3rdClass
সূত্র
এই পদ্ধতির সাথে আমি দেখতে পাচ্ছি একটি সমস্যা হ'ল এটি একটি টাইমার (২.২ সেকেন্ড) এর উপর নির্ভর করে এবং সেই সময়ে যদি ব্যবহারকারী উইন্ডোটিকে পুনরায় আকার দেয়, তবে এটি নিজেকে সংশোধন করতে সময় লাগবে। এটি ব্যবহারকারীর অভিজ্ঞতার ক্ষেত্রে সবচেয়ে ভাল জিনিস নয়। এছাড়াও, যদি এটি সহায়তা করা যায় তবে টাইমারের পরিবর্তে ইভেন্ট শ্রোতাদের ব্যবহার করার চেষ্টা করুন।
— জোসেফ মেরিকলে
যেমন আমি এটি একটি পুরানো স্ক্রিপ্ট বলেছিলাম, এটি আমার প্রথম একটি, এবং এটির কোনও ঠিক করার দরকার নেই। সুতরাং এটি সেরা নয়, তবে এটি একটি ভাল সূচনা পয়েন্ট হতে পারে।
— webLacky3rdClass
0

আমার প্রকল্পটি। বুটস্ট্র্যাপের সাথে নেট এএসপি কোর 2 এমভিসি অ্যাঙ্গুলার 4 টেম্পলেটটি প্রথম সারিতে কাজ করে মূল অ্যাপ্লিকেশন উপাদান এইচটিএমএল (যেমন অ্যাপ্লিকেশন.পোন্ট.এইচটিএমএল) "স্টিকি-টপ" যুক্ত করছে:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>
স্নিপেট প্রসারিত করুন

এটি কি কনভেনশন নাকি আমি এটির চেয়ে বেশি বোঝাপড়া করেছি?

— অ্যাডাম কক্স
সূত্র
0

আপনি যখন position:fixedসিএসএস বিধি ব্যবহার করেন এবং top/ left/ right/ প্রয়োগ করার চেষ্টা করেনbottom এটি উইন্ডোটির সাথে সম্পর্কিত উপাদানটির অবস্থান ।

একটি workaround / / / এর marginপরিবর্তে বৈশিষ্ট্য ব্যবহার করা হয়topleftrightbottom

— সুনীল গার্গ
সূত্র
-1

এটা যাচাই কর:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>
— কুনাল
সূত্র
5
আমি মনে করি না যে এটি ওপি সম্পর্কে যা বলেছিল তা যথেষ্টভাবে সম্পাদন করছে।
— জেসনওয়াইট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.