मेरे पास एक निश्चित साइड नेविगेशन बार है, जो डिफ़ॉल्ट रूप से, मेरे पृष्ठ, शीर्षलेख पर सबसे ऊपरी तत्व के गहरे रंग से मेल खाने के लिए एक गहरा रंग है।

enter image description here

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

मैं Waypoints by Imakewebthings नामक प्लगइन का उपयोग करके इस आशय को प्राप्त करता था:

var waypoint1 = new Waypoint({
    element: document.getElementById('services-summary'),
        handler: function (direction) {
            if (direction === 'down') {
                // change navigation theme
            } else {
                // change navigation theme
            }
    },
    offset: main_nav_height
});

हालांकि, मैं किसी भी निर्भरता का उपयोग किए बिना इस नई परियोजना को बनाने की कोशिश कर रहा हूं। इसलिए मैंने जावास्क्रिप्ट के मूल इंटरसेक्शन ऑब्जर्वर का उपयोग करने का निर्णय लिया है। कोशिश करें और उसी प्रभाव को प्राप्त करें, क्योंकि मैं इसके लिए ब्राउज़र समर्थन और कुछ अन्य दृश्य प्रभावों के साथ ठीक हूं।

मुझे एक साथ कार्यशील संस्करण प्राप्त करने में समस्या हो रही है जो ऊपर और नीचे स्क्रॉलिंग दिशाओं का सम्मान करता है। मेरे पास एक मुद्दा भी है, जहां पेज लोड पर, मुझे जेएस कंसोल पर आउटपुट किए गए दोनों सेक्शन थीम नाम मिल रहे हैं जो बिल्कुल भी आदर्श नहीं है।

यह वह जगह है जहाँ मैं इसके साथ हूँ:

जावास्क्रिप्ट:

var intersection_observer_options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
};

var observer = new IntersectionObserver(change_themes_on_view, intersection_observer_options);

function change_themes_on_view(entries, observer) {
    for (var i = 0; i < entries.length; i++) {
        var theme = entries[i].target.getAttribute('data-theme');
        console.log(theme);
    }
}

var themed_sections = document.querySelectorAll('*[data-theme]');
for (var i = 0; i < themed_sections.length; i++) {
    observer.observe(themed_sections[i]);
}

एचटीएमएल:

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

<header data-theme="dark">
    ...
</header>

<main>
    <section data-theme="light">
        ...
    </section>

    <section data-theme="dark">
        ...
    </section>

    <section data-theme="light">
        ...
    </section>

    <section data-theme="dark">
        ...
    </section>
</main>

जब मैं अपना पृष्ठ चलाता हूं, तो मुझे कहीं भी स्क्रॉल किए बिना निम्न कंसोल आउटपुट मिलता है और यह नहीं देख सकता कि क्यों:

> dark
> light
> dark
> light
> dark

मेरी मदद करने के लिए, मैंने इसे काम करने में मदद करने के लिए एक FIDDLE एक साथ रखा है।

क्या कोई इस नए इंटरसेक्शन ऑब्जर्वर एपीआई के ज्ञान के साथ मुझे दहलीज पार करने में मदद कर सकता है? क्षमा करें, इसका दूसरा अर्थ यह भी है।

अपडेट 1

मुझे लगता है कि मैंने इसे यहां काम कर लिया है। अभी भी टटोल रहा है।

अपडेट 2

हां, यह काम कर रहा है

मैं अपना उत्तर जोड़ूंगा क्योंकि मुझे यकीन है कि प्रश्न को हटाने के बजाय किसी और को यह उपयोगी लगेगा।

1
Martin James 26 सितंबर 2019, 18:58

1 उत्तर

सबसे बढ़िया उत्तर

मैंने इसे स्वयं ठीक किया और आश्चर्यजनक रूप से बहुत दूर नहीं था।

मेरी दोनों चिंताओं को ठीक करने के लिए - यह कंसोल में सभी विषयों को क्यों आउटपुट कर रहा था और स्क्रॉल दिशा पर विचार नहीं कर रहा था - मैंने बस इस सशर्त कथन को मेरे change_themes_on_view फ़ंक्शन में जोड़ा:

if (entries[i].intersectionRatio > 0) {
    // do stuff now entry is in viewport
}

कौन सा परीक्षण अगर लक्ष्य तत्व/प्रविष्टि व्यूपोर्ट के अंदर है।

यह स्पष्ट रूप से मेरे कंसोल पर पेज लोड पर सभी लक्षित थीम मानों को आउटपुट करने वाली स्क्रिप्ट को ठीक करता है। यह अब दिशा का भी सम्मान करता है, क्योंकि जब लक्ष्य तत्व व्यूपोर्ट छोड़ता है तो विषय उलट जाता है।

यह अब पूर्ण कार्य है:

function change_themes_on_view(entries, observer) {
  for (var i = 0; i < entries.length; i++) {
    if (entries[i].intersectionRatio > 0) {
      var theme = entries[i].target.getAttribute('data-theme');
      nav_bar.setAttribute('data-theme', theme);
    }
  }
}

यह कार्यशील डेमो है

0
Martin James 26 सितंबर 2019, 21:21