पृष्ठ

Question

स्क्रॉल करने के बाद तत्वों को सीएसएस स्थिति बदलना, मैं इसके साथ पकड़ने की कोशिश कर रहे कुछ jquery के साथ गड़बड़ कर रहा हूं।

मेरे पास एक उल नौसेना है जिसमें पूर्ण स्थिति सेट है लेकिन पृष्ठ को 200 पिक्सेल से नीचे स्क्रॉल करने के बाद मैं चाहता हूं कि वह निश्चित स्थिति पर स्विच करें ताकि नौसेना हमेशा पृष्ठ पर रहती है।

मैं यह कैसे करूँगा?

नीचे

उदाहरण मैं

http://satbulsara.com/tests/

Answer 1

धन्यवाद

यह है कि क्या मैं

$(document).ready(function() { 
    var theLoc = $('ul').position().top; 
    $(window).scroll(function() { 
     if(theLoc >= $(window).scrollTop()) { 
      if($('ul').hasClass('fixed')) { 
       $('ul').removeClass('fixed'); 
      } 
     } else { 
      if(!$('ul').hasClass('fixed')) { 
       $('ul').addClass('fixed'); 
      } 
     } 
    }); 
}); 

चाहता था मैं

http://www.defringe.com/

http://satbulsara.com/tests/

thankss से समझ में आ गया है !! !!!

Answer 2

पर यहाँ काम कर रहा हूँ कोड मैं एक "स्टिकी" साइडबार बनाने के लिए उपयोग है। आपको अपने मार्कअप के अनुरूप आईडी को संशोधित करने की आवश्यकता होगी।

 
var sidebarScrollTop = 0; 

$(document).ready(function() { 
    sidebarScrollTop = $("#sidebar").offset(); 

    $(window).scroll(function() { 
     var docScrollTop = $('body,html').scrollTop(); 

     if(docScrollTop > sidebarScrollTop.top) { 
      $("#sidebar").css({ position: 'fixed', top: '0px' }); 
     } else { 
      $("#sidebar").css({ position: 'static' }); 
     } 
    }); 
}); 

$(window).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

$(document).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

असल में, तुम सब करने की जरूरत है साइडबार कंटेनर की आईडी के लिए #sidebar बदल रहा है। यह कोड देखेंगे कि साइडबार तत्व स्क्रीन के शीर्ष के पीछे स्क्रॉल किया गया है या नहीं। यदि ऐसा है, तो यह fixed पर इसकी स्थिति बदलता है, और जब यह पृष्ठ पर फिर से होने पर वापस आता है, तो स्थिति static (डिफ़ॉल्ट) पर वापस आती है।

$(document).resize() और $(window).resize() फ़ंक्शंस यह सुनिश्चित करेंगे कि साइडबार पृष्ठ के शीर्ष पर चिपके रहें जब क्रमशः दस्तावेज़/विंडो का आकार बदलता है। दस्तावेज़ फ़ंक्शन यह सुनिश्चित करेगा कि साइडबार ठीक से काम करता है भले ही आपके पास jQuery एनीमेशन तत्वों के आकार को बदल रहा हो। तो मदद करने के लिए जल्दी होने के लिए हर किसी के लिए

Answer 3

मैंने ऐसा करने के लिए this jQuery plugin लिखा था।