विंडो स्क्रॉल

Question

के दौरान एक कंटेनर के भीतर एक तत्व को ठीक रखें, मेरे पास एक प्रश्न है जो मुझे लगता है कि एक छवि का उपयोग करके सबसे अच्छा समझाया जाएगा, इसलिए मैं इसे संलग्न करने जा रहा हूं।

ठीक है, तो मूल रूप से मैं क्या है किसी पैरेंट कंटेनर, और इसके अंदर एक तत्व है, जो हम FIXED तत्व के रूप में करने के लिए संदर्भित करेंगे (यह वास्तव में पाठ का कोई खंड हो जाएगा) है।

जब उपयोगकर्ता पृष्ठ के शीर्ष पर होता है, तो मैं चाहता हूं कि निश्चित तत्व उसके माता-पिता के शीर्ष पर हो। जब उपयोगकर्ता पृष्ठ को स्क्रॉल करना शुरू कर देता है, और अभिभावक दृश्य पोर्ट को आगे बढ़ना शुरू करता है, तो मैं चाहता हूं कि निश्चित तत्व स्क्रॉलिंग का पालन करें जब तक कि वह अपने माता-पिता के नीचे तक न पहुंच जाए, फिर यह वहां रुक जाता है।

वर्तमान में इस के लिए कोई HTML या कुछ भी नहीं है, क्योंकि मैं इस वेबसाइट के किसी न किसी स्केचिंग चरण में हूं।

मैं सामान्य रूप से jQuery या जावास्क्रिप्ट का उपयोग करने के लिए खुला हूं, मेरे जेएस कौशल सीमित हैं, और मैं jQuery से परिचित हूं, लेकिन मुझे कोड कॉपी करने और पेस्ट करने और इसके साथ गड़बड़ करने में कोई फर्क नहीं पड़ता।

किसी भी मदद की सराहना की जाएगी। धन्यवाद!

Answer 1

जावास्क्रिप्ट (jQuery के साथ या बिना) का उपयोग करके आप क्या करना चाहते हैं, मूल रूप से माता-पिता की स्थिति के खिलाफ तत्व की स्थिति बदलता है, माता-पिता को सापेक्ष होना चाहिए। आप स्क्रॉलबार की स्थिति के आधार पर स्थिति बदलते हैं।

इस ट्यूटोरियल में इसे पूरा करने के तरीके के बारे में एक अच्छी व्याख्या है।

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Answer 2

कुछ उत्तरदायी पृष्ठों या जब आपके ब्राउज़र का आकार बदलने, साइडबार एक केंद्रीय तत्व बन के लिए

। तो आप ब्रेक पॉइंट की देखभाल कर सकते हैं। मैंने 786 का उपयोग किया। इसके अलावा div को शुरुआत में शीर्ष पर नहीं रखा जा सकता है, इसलिए आपको कोड द्वारा ऑफसेट सेट करना चाहिए।

<script> 
    $().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 
     var $div_top = $scrollingDiv.offset().top; 
     $(window).scroll(function(){ 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
     $(window).resize(function() { 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
    }); 
</script>