जेएस एक चिकनी स्क्रॉल बनाएं

Question

मुझे गंभीरता से स्क्रॉल ईवेंट के बारे में कोई प्रश्न है। मैंने इसे पूरी रात हल करने की कोशिश की लेकिन मैं नहीं कर सका।

मैं शीर्ष पर एक नेविगेशन चिपकाने की कोशिश कर रहा हूं। $(window).scrollTop() नेविगेशन से पहले बिंदु को पार करते समय छड़ी प्रभाव संसाधित करेगा।

समस्या यह है कि आईई और क्रोम पर "ब्लिंक" प्रभाव (इसकी देरी प्रक्रिया की तरह) होगा लेकिन फ़ायरफ़ॉक्स पर नहीं।

मेरे शोध पर मुझे पता था कि फ़ायरफ़ॉक्स में डिफ़ॉल्ट रूप से "चिकनी स्क्रॉल" है।

हालांकि, Chrome या IE

http://www.backslash.gr/demos/jquery-sticky-navigation/

यह Firefox पर की तरह तो चिकनी है, और कोड सिर्फ इतना है कि सरल है पर इस उदाहरण की जाँच करें ......

बिंदु है, मैं इस उदाहरण की तरह बिल्कुल वही कर रहा हूं लेकिन मेरे पास 'ब्लिंक' प्रभाव क्यों है ??

सीएसएस पर चाल है ??

क्या कोई तरीका है कि मैं एक चिकनी स्क्रॉल बना सकता हूं जैसे कि जेएस द्वारा फ़ायरफ़ॉक्स पर क्या ??

आपकी मदद के लिए बहुत बहुत धन्यवाद।

$(window).on('scroll', Sticky); 

function Sticky(){ 
    $(this).scrollTop() > anchor.offset().top 
    ? nav.css({ 'position': 'fixed', 
         'z-index': z_index, 
         top: y, 
         left: x, }) 
    : nav.css({ 'position': 'static', }); 
}; 

Answer 1

, अपूर्ण उदाहरण कोड यह निर्धारित करने के लिए क्या हो रहा है बहुत मुश्किल है को देखते हुए तो या तो पूरा कोड के साथ अपने सवाल अपडेट कर लें, या बेहतर - एक JSFiddle अपलोड आइए हम एक उदाहरण के रूप में सेवा करने के लिए और हम सीधे इसे अपडेट कर सकते आवश्यक परिवर्तन के साथ। अब तक यह लग रहा है आप अपने उदाहरण कोड में लिखने की त्रुटियों के कारण एक flickering प्रभाव हो रही है की तरह (मैं पहले क्या कहा के आधार पर):

? nav.css({ 'position': 'fixed', 
        'z-index': z_index, 
        top: y, 
        left: x, }) 
: nav.css({ 'position': 'static', }); 

जहां सीएसएस गुणों और मूल्यों की सरणी समाप्त नहीं कर रहे हैं जिसे लागू करने की आवश्यकता है (आप इसे अल्पविराम , के साथ समाप्त कर रहे हैं), और आपने कुछ सीएसएस गुणों को एक एकल उद्धरण ' में संलग्न नहीं किया है। आपका कोड होना चाहिए:

? nav.css({ 'position': 'fixed', 
        'z-index': z_index, 
        'top': y, 
        'left': x }) 
: nav.css({ 'position': 'static' }); 

आप पहले से ही चर z_index, y और x पहले से निर्धारित किया है प्रदान की निश्चित रूप से है कि।

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

Answer 2

मुझे लगता है कि आप यहां दो चीजों को भ्रमित कर सकते हैं।

1. आपके द्वारा लिंक किए गए कार्य कोड को देखकर। यदि आप अपने माउस स्क्रोलर का उपयोग कर क्रोम या आईई या फ़ायरफ़ॉक्स पर स्क्रॉल करते हैं तो वहां एक झपकी होती है।
2. झपकी इसलिए है क्योंकि आप अचानक स्थिति बदल रहे हैं। जेएस को बदलने की कोशिश करें ताकि यह अचानक अपने मूल्य को बदलने के बजाय स्थिति को एनिमेट कर सके।

जैसा कि अन्य ने एक कामकाजी कोड से लिंक करने और एक चाल दिखाकर एक उत्तर की उम्मीद करने के लिए कहा है, हम सभी की मदद नहीं कर सकते हैं। जेएस की स्थिति परिवर्तन रेखा पर एनिमेट जोड़ने का प्रयास करें और देखें कि क्या इससे मदद मिलती है।

यहां कोई चाल नहीं है। कोड में यह सब स्रोत को पढ़ें और आनंद लें।