स्क्रॉल

Question

पर jQuery स्टिक हेडर शीर्ष पर एक सब-हेडर स्टिक बनाने के लिए मैंने एक rediculasly छोटे स्निपेट बनाया है। लेकिन चूंकि, जैसा कि मैंने कहा - मैं कर रहा हूँ कोई एक js genious या jQuery genious तरह से है - और वास्तव में अब तक इसे से - मैं अपने ही कोडिंग क्षमताओं के बारे में मेरे शक है ..

• डेमो यहाँ है: http://jsfiddle.net/obmerk99/VvKq3/1/

सवाल:

• 1 - मैं क्या कर रहा हूँ मीटर - मेरे टुकड़ा की तुलना में अधिक कोड के साथ प्लग इन का एक बहुत (और यह बहुत साइट में भी ढेर सारे प्रश्न ) हो रहा है जारी करना ?? मैं क्या गलत कर रहा हूं ?
• 2 - क्या यह कार्य क्रॉस-ब्राउज़र होगा?
• 3 .. और यह एक छोटी सी समस्या है, जो छोटे "कूद" से बचने के लिए कैसे होता है? (आप बेला पर जाएँ, और स्क्रॉल अगर धीरे -

- आपको लगता है कि मुख्य div "कूदता" जब स्क्रिप्ट पैदा की है .. मैं कम divs के लिए एक और .pad वर्ग को जोड़ने की कोशिश की है देखेंगे ।

अतिरिक्त वर्ग: .pad जब स्क्रिप्ट पैदा

.pad {padding-top: 42px;}

लेकिन यह सही काम करने के लिए लगता है नहीं करता है: http://jsfiddle.net/obmerk99/VvKq3/2/

• 5 मैं div की वास्तविक स्थिति की गणना कैसे कर सकता हूं? जब मैं कुछ इस तरह का प्रयास करें:

var top = jQuery(window).scrollTop(); 

var div_top = jQuery('#header_stick').offset().top; 

if (top > div_top) // height of float header; 

यह चिड़चिड़ा है ... http://jsfiddle.net/obmerk99/VvKq3/4/

• 6 किसी भी अन्य सुझावों का स्वागत है ..

Answer 1

" कूदना "होता है क्योंकि तत्व मूल तत्व में स्थान पर कब्जा कर रहा था, और जब आप अपनी पॉजिआई बदलते हैं fixed पर टयन अब अचानक नहीं है। मुझे इसे संभालने का सबसे अच्छा तरीका नहीं पता है, लेकिन एक विकल्प आपके #header_stick से पहले की एक ही ऊंचाई के साथ एक छोटी अवधि (शायद एक ही स्थान के साथ) जोड़ देगा, इसलिए जब यह कक्षा बदल जाती है तब भी ऊंचाई अंतर के लिए खाते में कुछ होना चाहिए। (अद्यतन: अपने पैड समाधान शायद सबसे अच्छा एक है, एक बार done right है, नीचे देखें)

आपका गद्दी समाधान भी काम हो सकता है, कि प्रदान की जाती हैं: 1) आप उस वर्ग को दूर करने के याद है जब शीर्ष करने के लिए उपयोगकर्ता स्क्रॉल (आपके बेवकूफ में मैं आपको इसे जोड़ता हूं, लेकिन आपको इसे हटाने में नहीं देखता); 2) आपको ऊंचाई सही मिलती है - मैं अभी भी आपके कोड पर बारीकी से नहीं देख पा रहा था, इसलिए मुझे नहीं पता कि आप कहां गलत हैं।(संपादित करें: समस्या यह है कि आपके .pad वर्ग चल हैडर की ऊंचाई उपयोग कर रहा था, नहीं छड़ी हैडर था - कि फिक्सिंग और हटाने वर्ग सामने आए कि मैं क्या correct result प्रतीत होने वाली)

की वास्तविक स्थिति के बारे में div, क्या आपने पैर के ऑफसेट को पैरेंट तत्व के ऑफसेट से घटाने का प्रयास किया है? इस तरह आप माता-पिता के सापेक्ष अपनी स्थिति लेंगे (सीमाओं जैसी चीजों पर ध्यान दें, हालांकि - मैंने हाल ही में answered एक अन्य प्रश्न है जहां इस तरह के विवरण इस तरह के हैं)।

अद्यतन: आपकी समस्या यहां यह प्रतीत होती है कि जब स्थिति तय हो जाती है, ऑफसेट भी जंगली रूप से भिन्न होता है। मैं एक बार सही ऊंचाई की गणना करने का सुझाव दूंगा, फिर इसे कहीं भी संग्रहीत करूँगा ताकि स्क्रॉल फ़ंक्शन इसका उपयोग कर सके। दूसरे शब्दों में, स्क्रॉल करते समय इसकी गणना न करें, जिससे क्लास स्विच करने के लिए सही शेडल्ड ढूंढना अधिक कठिन हो जाता है।

इसके अलावा, मुझे लगता है कि आप कोड ठीक हैं, और मेरा मानना ​​है कि यह क्रॉस ब्राउज़र भी काम करेगा (कम से कम मानक अनुपालन वाले, IE के पुराने संस्करणों के बारे में कुछ भी नहीं कह सकते हैं)। बहुत अंतर्दृष्टिपूर्ण, मैंने हमेशा सोचा कि यह "चाल" कैसे काम करता है, अब मैं कल्पना करता हूं कि यह कल्पना से आसान है ...

Answer 2

आप इस तरह से प्रयास कर सकते हैं। मैंने आसान विश्लेषण के लिए एक छोटा संस्करण बनाया। fiddle here

<div id="ontop">floating heading</div> 
<header>sticky heading</header> 
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/> 
</div> 



#ontop {width:100%; height:80px; background-color:yellow;} 
header {width:100%; height:20px; background-color:lightgrey; } 
#wrapper {background-color:lightblue; height:5000px;} 

.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;} 


$(function() { 
    var elem = $('header'), 
     wrapperElem = $('#wrapper'), 
     elemTop = elem.offset().top; 
    $(window).scroll(function() { 
     elem.toggleClass('navfixed', $(window).scrollTop() > elemTop); 
     wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop); 
    }).scroll(); 
});