स्थिर स्थिति लेकिन कंटेनर के सापेक्ष

Question

मैं divइसे ठीक करने की कोशिश कर रहा हूं ताकि यह हमेशा स्क्रीन के शीर्ष पर चिपक जाए,

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

हालांकि, divएक केंद्रित कंटेनर के अंदर है। जब मैं इसका उपयोग position:fixedकरता हूं तो इसे ठीक करता हैdiv ब्राउज़र विंडो सापेक्ष को है, जैसे कि यह ब्राउज़र के दाईं ओर होता है। इसके बजाय, यह कंटेनर के सापेक्ष तय किया जाना चाहिए।

मुझे पता है कि position:absoluteइसका उपयोग किसी तत्व के सापेक्ष ठीक करने के लिए किया जा सकता है div, लेकिन जब आप पृष्ठ को नीचे स्क्रॉल करते हैं तो तत्व गायब हो जाता है और साथ ही ऊपर से चिपक नहीं जाता हैposition:fixed ।

क्या इसे हासिल करने के लिए कोई हैक या वर्कअराउंड है?

Comments

"टेदर एक निम्न-स्तरीय UI लाइब्रेरी है जिसका उपयोग किसी भी तत्व को किसी भी अन्य तत्व के बगल वाले पृष्ठ पर रखने के लिए किया जा सकता है।" github.com/shipshapecode/tether + Demos / डॉक्स tether.io पर

— काई

Answer 1

संक्षिप्त उत्तर: नहीं। (यह अब सीएसएस परिवर्तन के साथ संभव है। नीचे संपादित देखें)

लंबे उत्तर: "निश्चित" स्थिति का उपयोग करने में समस्या यह है कि यह तत्व को प्रवाह से बाहर ले जाता है । इस प्रकार यह अपने माता-पिता के सापेक्ष फिर से तैनात नहीं किया जा सकता है क्योंकि यह ऐसा है जैसे कि यह एक नहीं था। यदि, हालांकि, कंटेनर एक निश्चित, ज्ञात चौड़ाई का है, तो आप कुछ का उपयोग कर सकते हैं:

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

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

संपादित करें (03/2015):

यह पुरानी जानकारी है। अब CSS3 के परिवर्तन के जादू की मदद से एक गतिशील आकार (क्षैतिज और लंबवत) की सामग्री को केंद्र में रखना संभव है। एक ही सिद्धांत लागू होता है, लेकिन अपने कंटेनर को ऑफसेट करने के लिए मार्जिन का उपयोग करने के बजाय, आप उपयोग कर सकते हैंtranslateX(-50%) । यह उपरोक्त मार्जिन ट्रिक के साथ काम नहीं करता है क्योंकि आपको पता नहीं है कि इसे कितना ऑफसेट करना है जब तक कि चौड़ाई तय नहीं हो जाती है और आप सापेक्ष मूल्यों (जैसे 50%) का उपयोग नहीं कर सकते क्योंकि यह माता-पिता के सापेक्ष होगा और तत्व नहीं है। पर लागू किया गया। transformअलग तरह से व्यवहार करता है। इसके मूल्य उस तत्व के सापेक्ष हैं, जिस पर वे लागू होते हैं। इस प्रकार, 50%का transformअर्थ है तत्व की आधी चौड़ाई, जबकि 50%मार्जिन के लिए माता-पिता की चौड़ाई का आधा है। यह एक IE9 + समाधान है

उपरोक्त उदाहरण के समान कोड का उपयोग करते हुए, मैंने पूरी तरह से गतिशील चौड़ाई और ऊंचाई का उपयोग करके उसी परिदृश्य को फिर से बनाया:

.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%);
}

डेमो:

jsField: केवल क्षैतिज रूप से केंद्रित है
jsFiddle: दोनों क्षैतिज और लंबवत
मूल रूप से केंद्रित मूल क्रेडिट उपयोगकर्ता aaronk6 को इस उत्तर में मुझे इंगित करने के लिए जाता है

Comments

मेरे लिए खूबसूरती से काम किया। हालाँकि मुझे बायीं ओर और पहले से ही केंद्रित, डिविक्स डिव के लिए मेरा होना आवश्यक था, इसलिए इसे बायीं मार्जिन को कम करना पड़ा जब तक कि इसे संरेखित नहीं किया गया। कोई ठहरता नहीं खिड़कियों की चौड़ाई से कोई फर्क नहीं पड़ता। धन्यवाद। +1

— इयान एम नॉर्मन

@ कोई भी विचार क्यों position:fixedनिर्दिष्ट किए बिना topया left कभी-कभी काम करता है? कुछ ब्राउज़र उस तत्व को डिफ़ॉल्ट करने के लिए प्रकट होते हैं जहां यह सामान्य रूप से होगा, अगर इसमें सामान्य स्थिति थी। stackoverflow.com/questions/8712047/…

— Flash

निश्चित ऊंचाई और चौड़ाई के बिना क्या होगा? मेरे मामले में मैंने किसी भी कंटेनर को बॉडी टैग तक कोई सिग्नल चौड़ाई नहीं दी है। आप मुझे क्या करने के लिए कहेंगे समाधान।

— mfq

@mfq दुर्भाग्य से, यह विधि बिना किसी ज्ञात ऊँचाई और चौड़ाई के काम नहीं करेगी। आप जिस चीज के साथ जाते हैं, वह काफी हद तक इस बात पर निर्भर करेगा कि आप क्या करने की कोशिश कर रहे हैं। यदि यह एक छवि है, तो बस इसे 100% x 100% कंटेनर की पृष्ठभूमि के रूप में उपयोग करें। यदि यह एक वास्तविक तत्व है जो पूरी तरह से गतिशील है, तो संभवतः आपको आयामों को प्राप्त करने के लिए एक जावास्क्रिप्ट समाधान का उपयोग करके पता लगाना होगा।

— जोसेफ मैरीकल

मैंने पाया है कि left:inheritफिक्स्ड पोजिशन एलिमेंट को जोड़ने से ब्राउजर को पेरेंट्स की ऑफसेट का सम्मान करने के लिए बाध्य किया जा सकता है।

— 14

Answer 2

वास्तव में यह संभव है और स्वीकृत उत्तर केवल केंद्रीकरण से संबंधित है, जो सीधा सरल है। इसके अलावा, आपको वास्तव में जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है।

यह आपको किसी भी परिदृश्य से निपटने देगा:

सब कुछ सेट करें जैसा कि आप चाहते हैं कि आप पोजिशन करें: किसी पोज़िशन के अंदर निरपेक्ष: रिलेटिव कंटेनर, और फिर डिव के अंदर एक नया फिक्स्ड पोज़िशन डिव बनाएँ 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>

अफसोस की बात है, मैं उम्मीद कर रहा था कि यह धागा Android के WebKit रेंडरिंग बॉक्स-शैडो ब्लर पिक्सल्स के साथ निश्चित स्थिति तत्वों पर मार्जिन के रूप में मेरी समस्या को हल कर सकता है , लेकिन ऐसा लगता है कि यह एक बग है।
खैर, मुझे उम्मीद है कि इससे मदद मिलेगी!

Comments

किसी भी परिदृश्य में नहीं, लेकिन यह एक अच्छी शुरुआत है। यदि नीचे बहुत सी जगह है .wrapper तो आपका .fixed-आवरण माता-पिता के तल पर समाप्त हो जाएगा, लेकिन आपका .fixed तत्व दोनों कंटेनरों से बाहर और नीचे किसी भी सामग्री में प्रवाहित होता रहेगा। जैसा मैंने कहा, यह एक अच्छी शुरुआत है, बिल्कुल सही नहीं है, लेकिन मैं यह नहीं देखता कि यह कैसे बिना कुछ js के पूरा किया जा सकता है।

— o_O

हालांकि, यह द्रव डिजाइन के साथ अच्छा नहीं खेलता है।

— ज़ुहैब अली

मैंने ऐसा करने की कोशिश की, लेकिन जब और जब मैं नीचे स्क्रॉल करता हूं, तो हेडर जो मैंने तय किया था (माता-पिता के पूर्ण निरपेक्ष जिसके साथ रिश्तेदार थे) मैं स्क्रॉल के रूप में स्थानांतरित नहीं हुआ।

— मिराज

इसने मेरे लिए क्रोमियम और फ़ायरफ़ॉक्स में एक टॉप-राइट डिव के साथ काम किया, सिवाय इसके कि फिक्स्ड डिव के वर्टिकल पोज़िशन अलग थे (क्रोमियम पर यह पैरेंट डिव के ऊपर था, फ़ायरफ़ॉक्स पर यह अंदर था)।

— डेमियन

यह मेरे लिए जवाब था! धन्यवाद @Graeme ब्लैकवुड

— Tabu.Net

Answer 3

हाँ, ऐनक के अनुसार, एक रास्ता है।

जबकि मैं मानता हूं कि ग्रीम ब्लैकवुड को स्वीकृत जवाब होना चाहिए, क्योंकि यह व्यावहारिक रूप से इस मुद्दे को हल करता है, यह ध्यान दिया जाना चाहिए कि एक निश्चित तत्व को इसके कंटेनर में अपेक्षाकृत तैनात किया जा सकता है।

मैंने देखा कि दुर्घटना से जब आवेदन

-webkit-transform: translateZ(0);

शरीर के लिए, इसने एक निश्चित बच्चे को इसके सापेक्ष (व्यूपोर्ट के बजाय) बनाया। इसलिए मेरे निश्चित तत्व leftऔर topगुण अब कंटेनर के सापेक्ष थे।

इसलिए मैंने कुछ शोध किया, और पाया कि यह मुद्दा पहले से ही एरिक मेयर द्वारा कवर किया गया था और यहां तक ​​कि अगर यह "ट्रिक" जैसा महसूस हुआ, तो पता चलता है कि यह विनिर्देशों का हिस्सा है:

ऐसे तत्वों के लिए जिनका लेआउट CSS बॉक्स मॉडल द्वारा शासित होता है, स्टैकिंग प्रसंग और युक्त ब्लॉक दोनों के निर्माण में परिणत परिणामों के अलावा कोई भी मूल्य नहीं होता है। ऑब्जेक्ट स्थिर तैनात वंशज के लिए युक्त ब्लॉक के रूप में कार्य करता है।

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

इसलिए, यदि आप किसी मूल तत्व में कोई परिवर्तन लागू करते हैं, तो यह युक्त ब्लॉक बन जाएगा।

परंतु...

समस्या यह है कि कार्यान्वयन छोटी गाड़ी / रचनात्मक लगता है, क्योंकि तत्व भी निश्चित रूप से व्यवहार करना बंद कर देते हैं (भले ही यह बिट विनिर्देशन का हिस्सा नहीं लगता है)।

वही व्यवहार सफारी, क्रोम और फ़ायरफ़ॉक्स में मिलेगा, लेकिन IE11 में नहीं (जहां तय तत्व अभी भी तय रहेगा)।

एक और दिलचस्प (अविवादित) बात यह है कि जब एक निश्चित तत्व एक परिवर्तित तत्व के अंदर समाहित होता है, जबकि इसके topऔर leftगुण अब कंटेनर से संबंधित होंगे, box-sizingसंपत्ति का सम्मान करते हुए , इसका स्क्रॉलिंग संदर्भ तत्व की सीमा पर विस्तार करेगा, जैसे कि बॉक्स -साइजिंग के लिए सेट किया गया था border-box। कुछ रचनात्मक लोगों के लिए, यह संभवतः एक खेल बन सकता है :)

परीक्षा

Comments

इसने मुझे एक कंटेनर के अंदर फिक्स्ड हेडर के साथ

— ज़ाच सॉसर

अच्छा है, यह मेरे लिए क्रोम में काम करता है। कैसे IE में ही प्राप्त करने के लिए पर कोई विचार? मैंने ट्रांसलेशन का उपयोग करने की कोशिश की है, लेकिन यह IE के किसी भी संस्करण में नहीं था।

— अनीश पटेल

उसी .. किसी को पता है कि कैसे IE में यह करने के लिए? ब्राउज़र का पता लगाने के लिए एक तरह का दर्द, फिर व्यवस्थित रूप से दिखाना या न दिखाना left:(इस बात पर विचार करना कि यह गड़बड़ है)

— Tallboy

मैं बस विपरीत स्थिति को पूरा करता हूं जिसे मुझे रिश्तेदार कंटेनर में तय करने की आवश्यकता है लेकिन संपत्ति को बदलकर। आपका उत्तर बहुत मददगार है, धन्यवाद!

— मायथैचर

@ फ्रांसेस्को फ्रैपट्टी लगता है कि यह अब काम नहीं करता है ... वैसे भी क्रोम के नवीनतम संस्करण में (संस्करण 42.0.2311.90) :(

— jjenzz

Answer 4

उत्तर हां है, जब तक आप सेट नहीं करते हैं left: 0या right: 0जब आप निर्धारित करने के लिए div स्थिति सेट करते हैं।

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

साइडबार div चेकआउट करें। यह तय है, लेकिन माता-पिता से संबंधित है, न कि खिड़की के दृश्य बिंदु से।

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>

Comments

किसी भी कारण से यह अधिक upvotes नहीं मिलता है? मेरे लिए सबसे स्पष्ट समाधान लगता है।

— ट्रेस

पार ब्राउज़र संगतता के बारे में क्या। क्या आप में से किसी ने यह जाँच की?

— अलेक्जेंड्रे बॉलीयर

यह सही है लेकिन केवल निश्चित तत्व की 'स्थिति' के लिए है। यह कंटेनर की चौड़ाई का सम्मान नहीं करेगा या किसी भी तरह से आकार नहीं देगा। उदाहरण के लिए, यदि आपके पास अधिकतम-चौड़ाई के साथ एक तरल आवरण है: 1000px; मार्जिन: ऑटो; यह काम नहीं करेगा। यदि सब कुछ एक निश्चित चौड़ाई हो सकता है, तो हाँ इससे आपकी समस्या हल हो जाएगी।

— रईस

@AlexandreBourlier हाँ, इसने मेरे लिए क्रोम, फ़ायरफ़ॉक्स और IE11 में एक निश्चित तत्व के लिए अच्छी तरह से काम किया।

— जेसन फ्रैंक

पूरी तरह से काम किया। हाशिया-बायाँ जोड़ना था: तत्व को कन्टेनर के दाईं ओर लाने के लिए X

— आनंद 11

Answer 5

position: stickyतत्वों को स्थिति के लिए एक नया तरीका है जो वैचारिक रूप से समान है position: fixed। अंतर यह है कि एक तत्व अपने माता-पिता के भीतर की position: stickyतरह व्यवहार करता है position: relative, जब तक कि किसी दिए गए ऑफसेट सीमा को व्यूपोर्ट में पूरा नहीं किया जाता है।

Chrome 56 में (वर्तमान में दिसंबर 2016 तक बीटा, जनवरी 2017 में स्थिर) स्थिति: चिपचिपा अब वापस आ गया है।

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

अधिक विवरण छड़ी में अपने उतर रहे हैं! स्थिति: WebKit में चिपचिपी भूमि ।

Comments

यह जीवन को इतना आसान बनाता है, एकमात्र मुद्दा यह है कि स्टिकी इंटरनेट एक्सप्लोरर या एज 15 और पहले के संस्करणों में समर्थित नहीं है।

— रिक्स

position:stickyमहान है। आईई के अलावा सभी ब्राउज़र द्वारा समर्थित caniuse.com/#feat=css-sticky

— Yarin

योग्य, इतनी पुरानी एपीआई, और आप मेरा दिन बचाते हैं ... फ्लेक्स तालिकाओं के लिए निश्चित कॉलम के लिए इसका उपयोग कर रहे हैं।

— व्लादिस्लाव ग्रिट्सको 12

"अपने माता-पिता के भीतर" - क्या शीर्ष पर चिपचिपा तत्व रहना संभव है, या तो यदि माता-पिता स्क्रॉल किए गए अदृश्य हो गए?

— फिक्रेट

Answer 6

2019 समाधान: आप position: stickyसंपत्ति का उपयोग कर सकते हैं।

यहां एक उदाहरण CODEPEN उपयोग को प्रदर्शित करता है और यह भी कि यह किस प्रकार भिन्न होता है position: fixed।

यह कैसे व्यवहार करता है नीचे समझाया गया है:

1. चिपचिपा स्थिति वाला एक तत्व उपयोगकर्ता की स्क्रॉल स्थिति के आधार पर स्थित है। यह मूल रूप से position: relativeतब तक कार्य करता है जब तक कि किसी तत्व को एक विशिष्ट ऑफसेट से परे स्क्रॉल नहीं किया जाता है, जिस स्थिति में यह स्थिति में बदल जाता है: निश्चित। जब इसे वापस स्क्रॉल किया जाता है तो यह अपनी पिछली (सापेक्ष) स्थिति में वापस आ जाता है।

2. यह पृष्ठ में अन्य तत्वों के प्रवाह को प्रभावित करता है अर्थात पृष्ठ पर एक विशिष्ट स्थान रखता है (जैसे position: relative)।

3. यदि इसे कुछ कंटेनर के अंदर परिभाषित किया गया है, तो यह उस कंटेनर के संबंध में है। यदि कंटेनर में कुछ अतिप्रवाह (स्क्रॉल) है, तो स्क्रॉल ऑफसेट के आधार पर यह स्थिति में बदल जाता है: निश्चित।

इसलिए यदि आप निश्चित कार्यक्षमता प्राप्त करना चाहते हैं, लेकिन कंटेनर के अंदर, चिपचिपा उपयोग करें।

Comments

अच्छा समाधान। मैं position: stickyअभी तक नहीं जानता था । बहुत मदद की, धन्यवाद!

— dave0688

मैं बस इसे पोस्ट करने वाला था। अच्छा उत्तर! चिपचिपा रास्ता है।

— dkellner

Answer 7

बस ऊपर और बाएं शैलियों को निर्धारित स्थिति div से बाहर निकालें। यहाँ एक उदाहरण है

<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> 

#Content div जहां भी पैरेंट डिव बैठता है, वहीं बैठे रहेंगे, लेकिन वहां तय हो जाएगा।

Comments

माइनस क्यों? यह एक तत्व को ठीक करने के लिए पूरी तरह से काम करता है जहां आप डोम के प्रवाह में चाहते हैं। deadlykitten.com/tests/fixedPositionTest.php

— hobberwickey

Answer 8

मैंने एक समान समस्या को हल करने के लिए इस jQuery प्लगइन को बनाया है, जहां मैं एक केंद्रित कंटेनर (सारणीबद्ध डेटा) था, और मैं शीर्षलेख को पृष्ठ के शीर्ष पर ठीक करना चाहता था जब सूची स्क्रॉल की गई थी, फिर भी मैं चाहता था कि यह लंगर डाले सारणीबद्ध डेटा तो यह जहाँ भी मैं कंटेनर (केंद्रित, बाएँ, दाएँ) डालूँगा और क्षैतिज रूप से स्क्रॉल किए जाने पर इसे पृष्ठ के साथ बाएँ और दाएँ ले जाने की अनुमति देता हूँ।

यहाँ इस jQuery प्लगइन के लिए लिंक है जो इस समस्या को हल कर सकता है:

https://github.com/bigspotteddog/ScrollToFixed

इस प्लगइन का वर्णन इस प्रकार है:

इस प्लगइन का उपयोग पृष्ठ के शीर्ष पर तत्वों को ठीक करने के लिए किया जाता है, यदि तत्व को लंबवत रूप से स्क्रॉल किया जाएगा; हालाँकि, यह तत्व को क्षैतिज स्क्रॉल के साथ बाएँ या दाएँ स्थानांतरित करने की अनुमति देता है।

एक विकल्प मार्जिन को देखते हुए, ऊर्ध्वाधर स्क्रॉल लक्ष्य स्थिति तक पहुंचने के बाद, तत्व ऊर्ध्वाधर रूप से ऊपर की ओर बढ़ना बंद कर देगा; लेकिन, तत्व अभी भी क्षैतिज रूप से आगे बढ़ेगा क्योंकि पृष्ठ को बाएं या दाएं स्क्रॉल किया जाता है। एक बार पृष्ठ को वापस स्क्रॉल करने के बाद लक्ष्य स्थिति को पार कर लिया गया, तो तत्व पृष्ठ पर अपनी मूल स्थिति में बहाल हो जाएगा।

इस प्लगइन का फ़ायरफ़ॉक्स 3/4, Google Chrome 10/11, Safari 5 और Internet Explorer 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();
});

Answer 9

मुझे एक विज्ञापन के साथ ऐसा करना पड़ा कि मेरा ग्राहक सामग्री क्षेत्र से बाहर बैठना चाहता था। मैंने बस निम्नलिखित किया और यह एक आकर्षण की तरह काम किया!

<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>

Comments

मेरा विज्ञापन 140px चौड़ा था, इसलिए मैंने इसे वेबसाइट फ्रेम के किनारे के मुकाबले थोड़ा सा दाएं मार्जिन देने के लिए इसे बाईं ओर 150px स्थानांतरित किया।

— एरिक के

Answer 10

दो HTML तत्व और शुद्ध CSS (आधुनिक ब्राउज़र)

इसका jsFiddle उदाहरण देखें। आकार दें और देखें कि तय किए गए तत्व किस प्रकार के फ्लोट किए गए तत्वों के साथ चलते हैं। इनर-सबसे स्क्रॉल बार का उपयोग करके देखें कि स्क्रॉल किसी साइट पर कैसे काम करेगा (तय किए गए तत्व तय किए गए तत्व)।

के रूप में यहाँ कई कहा है, एक कुंजी पर कोई स्थितीय सेटिंग्स की स्थापना नहीं कर रहा है fixedतत्व (कोई top, right, bottom, या leftमान)।

इसके बजाय, हम सभी निश्चित तत्वों को डालते हैं (ध्यान दें कि अंतिम बॉक्स में उनमें से चार कैसे हैं) पहले बॉक्स में उन्हें बंद किया जाना है, जैसे:

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

तब हम उपयोग करते हैं margin-top और margin-leftउनके कंटेनर के संबंध में उन्हें "स्थानांतरित" करते हैं, जैसा कि इस सीएसएस ने किया है:

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

ध्यान दें कि क्योंकि fixedतत्व अन्य सभी लेआउट तत्वों को अनदेखा करते हैं, हमारी फ़ेल्ड में अंतिम कंटेनर कई fixedतत्व हो सकते हैं , और अभी भी उन सभी तत्वों में शीर्ष बाएं कोने से संबंधित हैं। लेकिन यह केवल सच है अगर वे सभी कंटेनर में पहले रखे जाते हैं, क्योंकि यह तुलना फ़िडल दिखाता है कि यदि कंटेनर सामग्री के भीतर बिखरे हुए हैं, तो स्थिति अविश्वसनीय हो जाती है ।

चाहे आवरण स्थिर , सापेक्ष या स्थिति में निरपेक्ष हो, इससे कोई फर्क नहीं पड़ता।

Answer 11

आप मेरे jQuery प्लगइन, FixTo के लिए एक कोशिश दे सकते हैं ।

उपयोग:

$('#mydiv').fixTo('#centeredContainer');

Answer 12

किसी अन्य निश्चित स्थिति को प्राप्त करने के लिए एक और अजीब समाधान आपके कंटेनर को एक आइफ्रेम में परिवर्तित कर रहा है, इस तरह से आपका निश्चित तत्व कंटेनर के व्यूपोर्ट के लिए तय किया जा सकता है और पूरे पृष्ठ पर नहीं।

Answer 13

शुद्ध सीएसएस के साथ आप इसे करने का प्रबंधन नहीं कर सकते हैं; कम से कम मैं नहीं। हालाँकि आप इसे 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');
});

Comments

समस्या यह है कि प्रश्न में div स्क्रॉल करते समय फ़्लिकर करता है।

— vvohra87

शायद क्योंकि स्क्रॉल बहुत अधिक या बहुत तेजी से ताज़ा है। मेरे पास वह समस्या tbh नहीं थी, लेकिन मैं आपको वैश्विक "ब्लॉकर" का उपयोग करने की कोशिश कर सकता हूं, जो उदाहरण के लिए हर 10ms या कुछ समय के लिए ताज़ा होगा, और हर बार जब आप कुछ ऊंचाई परिवर्तन करते हैं, तो अवरुद्ध मूल्य पर सेट करें। निश्चित रूप से आपको जोड़ना होगा कि अगर इस अवधि (10ms) में जाँच हो रही है तो .scroll घटना को पहले ही स्क्रॉल कर दिया है। मैं दोहराता हूं कि मैंने कोशिश नहीं की है, लेकिन मेरा मानना ​​है कि यह काम कर सकता है :) इस तरह से आप डिव को बदलने से रोक सकते हैं यह स्थिति बहुत अधिक है ताकि कंप्यूटर वास्तव में पालन न कर सके, और पर्याप्त है ताकि मानव आंख इसे देख सके।

— श्री ब्र।

मैंने पहले से ही आपका जवाब +1 मेट;) एक वैश्विक लूपिंग विधि संलग्न करने के साथ दर्द वास्तव में प्रदर्शन है। पुराने पीसी और गोलियों में अच्छी तरह से काम करने के लिए ऐसा कुछ प्राप्त करना दर्दनाक है। कई बार काम पर एक जूनियर देव ने इस तरह की विधि के अंदर एक 'var x' लिखा है जिसके परिणामस्वरूप अनावश्यक मेमोरी लीक हो जाती है यदि पृष्ठ बहुत लंबा खुला रहता है: P but yea आपका सुझाव एकमात्र वास्तविक विकल्प की तरह लगता है।

— vvohra87

आपको वैश्विक छोरों के साथ बिंदु मिला; मैं सहमत नहीं हूं। मैं इस तरह की समस्याओं के बारे में सोचना पसंद करता हूं, इसीलिए मैंने एक और सुझाव लिखा :) Tbh, अब यह थोड़ा बेहतर लग रहा है, मैं इससे बचूँगा xD मुझे अब एक और उपाय मिल गया है। आप स्क्रॉल इवेंट पर सेटटाइमआउट () सेट करने के बारे में क्या कहते हैं, जो फंक कहता है। यह डिव मूवमेंट बनाता है..तो आप ग्लोबल ब्लॉकर का उपयोग करें जो टाइमआउट की प्रतीक्षा करते समय सही पर सेट होता है और जब टाइमआउट कहा जाता है तो आप ब्लॉकर को वापस कर देते हैं जो कि कुछ समय बाद किसी अन्य कॉल को सक्षम करता है ... इस तरह से आप ग्लोबल लूप का उपयोग नहीं करेंगे लेकिन अभी भी div आंदोलन की आवृत्ति पर नियंत्रण है।

— श्री Br

यह अधिक सुरुचिपूर्ण है लेकिन मुझे इसे स्वीकार करना कठिन लगता है। इस तरह की बात है मुझे उम्मीद है कि html और css स्पेक्स tbh को हैंडल करेंगे। इस तथ्य से नफरत है कि जेएस पहले स्थान पर शामिल है!

— vvohra87

Answer 14

यह आसान है (नीचे HTML के अनुसार)

ट्रिक को तत्व (div) पर "स्थिति: फिक्स्ड;" के साथ टॉप या लेफ्ट का उपयोग नहीं करना है। यदि ये निर्दिष्ट नहीं होते हैं, तो "निश्चित सामग्री" तत्व RELATIVE को संलग्नक तत्व (इस स्थिति के साथ div: सापेक्ष: ";) ब्राउज़र विंडो के सापेक्ष के INSTEAD दिखाई देगा !!!

<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>

इसके बाद के संस्करण ने मुझे ऊर्ध्वाधर स्क्रॉलिंग के साथ बहुत सारे पाठ के शीर्ष पर एक समापन "एक्स" बटन का पता लगाने की अनुमति दी। "X" जगह में बैठता है (स्क्रॉल किए गए पाठ के साथ नहीं चलता है और फिर भी यह बायाँ या विभाजक div कंटेनर के साथ स्थानांतरित होता है जब उपयोगकर्ता ब्राउज़र विंडो की चौड़ाई का आकार बदल देता है! इस प्रकार यह लंबवत रूप से "निश्चित" है, लेकिन सापेक्ष में स्थित है) घेरने वाला तत्व क्षैतिज रूप से!

इससे पहले कि मैं यह काम कर पाता "एक्स" स्क्रॉल और दृष्टि से बाहर हो गया जब मैंने पाठ सामग्री को नीचे स्क्रॉल किया।

मेरे जावास्क्रिप्ट छिपाने के लिए क्षमा याचना नहीं () फ़ंक्शन, लेकिन यह अनावश्यक रूप से इस पोस्ट को लंबा कर देगा। मैंने इसे यथासंभव छोटा रखने का विकल्प चुना।

Comments

ठोस क्रॉस-ब्राउज़र समाधान, IE8 में एक आकर्षण की तरह काम करता है।

— dmi3y

Answer 15

मैंने एक jsfiddle को यह बदलने के लिए कैसे काम करता है इसे नष्ट करने के लिए बनाया।

एचटीएमएल

<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/

Answer 16

मेरे पास एक ही मुद्दा है, हमारी टीम का एक सदस्य मुझे एक समाधान देता है। डिव फिक्स स्थिति और अन्य डिव के सापेक्ष अनुमति देने के लिए, हमारे समाधान के लिए एक पिता कंटेनर का उपयोग फिक्स डिव और स्क्रोल डिव को लपेटना है।

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

सीएसएस

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

.fix {
  prosition:absolute;
}

Answer 17

/* 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%);
}

Answer 18

हां यह तब तक संभव है जब तक आप अपने तत्व की स्थिति ( topया left, आदि) को सेट नहीं करते fixed(आप अभी भी marginएक सापेक्ष स्थिति सेट करने के लिए उपयोग कर सकते हैं , हालांकि)। साइमन बोस ने इस बारे में कुछ समय पहले पोस्ट किया था ।

हालांकि गैर-तय रिश्तेदारों के साथ स्क्रॉल करने के लिए निश्चित तत्व की अपेक्षा न करें।

यहां एक डेमो देखें ।

Answer 19

मैंने कुछ देर ऐसा ही किया। मैं जावास्क्रिप्ट के लिए बहुत नया था, इसलिए मुझे यकीन है कि आप बेहतर कर सकते हैं, लेकिन यहां एक शुरुआती बिंदु है:

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)
}

आपको अपनी चौड़ाई निर्धारित करने की आवश्यकता होगी, और फिर यह खिड़की की चौड़ाई प्राप्त करता है और हर कुछ सेकंड में मार्जिन बदलता है। मुझे पता है कि यह भारी है, लेकिन यह काम करता है।

Comments

एक समस्या जिसे मैं इस दृष्टिकोण के साथ देख सकता हूं वह यह है कि यह एक टाइमर (2.5 सेकंड) पर निर्भर करता है और उस समय के दौरान, यदि उपयोगकर्ता विंडो का आकार बदल देता है, तो इसे खुद को सही करने के लिए उस समय तक का समय लगेगा। जब उपयोगकर्ता अनुभव की बात आती है तो यह सबसे अच्छी बात नहीं है। इसके अलावा, अगर इसकी मदद की जा सकती है, तो टाइमर के बजाय ईवेंट श्रोताओं का उपयोग करने का प्रयास करें।

— जोसेफ मैरिकेल

जैसे मैंने कहा कि यह एक ओएलडी स्क्रिप्ट है, मेरे पहले में से एक है, और इसे ठीक करने के लिए वापस जाने की आवश्यकता नहीं है। तो यह सबसे अच्छा नहीं है, लेकिन यह एक अच्छा शुरुआती बिंदु हो सकता है।

— webLacky3rdClass

Answer 20

यदि आप जावास्क्रिप्ट का उपयोग करते हैं तो यह संभव है। इस स्थिति में, jQuery प्लगइन स्टिकी-किट :

Answer 21

मेरी परियोजना .NET ASP कोर 2 MVC कोणीय 4 बूटस्ट्रैप के साथ 4 टेम्प्लेट है। पहली पंक्ति में मुख्य एप्लिकेशन घटक html (यानी app.component.html) में "चिपचिपा-शीर्ष" जोड़ना निम्नानुसार काम किया है:

<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>

क्या यह सम्मेलन या मैंने इसकी देखरेख की थी?

Answer 22

जब आप position:fixedCSS नियम का उपयोग करते हैं और top/ left/ right/ लागू करने का प्रयास करते हैंbottom यह स्थिति खिड़की के तत्व रिश्तेदार।

का संभावित हल उपयोग करने के लिए है marginके बजाय गुण top/ left/ right/bottom

Answer 23

इसे देखो:

<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>

Comments

मुझे नहीं लगता कि यह ओपी के बारे में पूछा गया काफी पूरा कर रहा है।

— जेसनवाट