मेरे पास पृष्ठ के अंदर पाद लेख के ठीक ऊपर .offer" वर्ग नाम वाला एक तत्व है। जब मैं स्क्रॉल आंदोलन में इस तत्व से संपर्क करता हूं, तो मैं चिपचिपा शीर्षलेख बंद करना चाहता हूं।

मैंने इसके लिए स्क्रॉल इवेंट में एक फंक्शन लिखा था लेकिन मैं कुछ के बारे में उत्सुक हूं।

जब मैं नीचे दिए गए उदाहरण की तरह एक फ़ंक्शन बनाता हूं, तो क्या प्रत्येक स्क्रॉल चाल के लिए मेमोरी में फ़ंक्शन में वेरिएबल फिर से बनाए जाते हैं? या एक साधारण पृष्ठ स्क्रॉल घटना में प्रदर्शन के लिए सच्चाई क्या है?

const stickyNearOfferClose = () => {

let scrollPos; 
let header = document.querySelector("header");
const documentOffset = document.querySelector(".offer").offsetTop;

  header.classList.toggle("sticky", window.scrollY);
  scrollPos = window.scrollY;

    if (scrollPos >= documentOffset) {
      header.classList.add("hide");
    } else {
      header.classList.remove("hide");
    }
};


window.addEventListener("scroll", function () {
  stickyNearOfferClose();
});

उपरोक्त प्रश्न के अतिरिक्त

जब मैं एक या अधिक स्क्रॉल क्रियाओं के लिए उपरोक्त फ़ंक्शन का उपयोग करना चाहता हूं,

क्या हमें इसका उपयोग किसी फ़ंक्शन के अंदर या किसी ऑब्जेक्ट के भीतर प्रदर्शन और उपयोगिता दोनों के लिए चर परिभाषित करना चाहिए?

मैंने नीचे दो अलग-अलग उदाहरण साझा किए हैं। आपको क्या लगता है कि कौन सा होना चाहिए?

const Obj = {
  scrollPos : null,
  elHeader: document.querySelector("header"),
  documentOffset: document.querySelector(".offer").offsetTop,
  // otherfunction (){},
  stickyNearOfferClose() {
    Obj.elHeader.classList.toggle("sticky", window.scrollY);

    if (Obj.scrollPos >= Obj.documentOffset) {
      Obj.elHeader.classList.add("hide");
    } else {
      Obj.elHeader.classList.remove("hide");
    }
  },
  // init(){}
};

window.addEventListener("scroll", function () {
  Obj.scrollPos = window.scrollY;
  requestAnimationFrame(Obj.stickyNearOfferClose);
});


// OR


const Obj = {
  // variables
  stickyNearOfferClose() {
    let scrollPos;
    const elHeader = document.querySelector("header");
    const elOffer = document.querySelector(".offer");
    const documentOffset = elOffer.offsetTop;

      let stickyClose = () => {
        elHeader.classList.toggle("sticky", window.scrollY);
          if (scrollPos >= documentOffset) {
            elHeader.classList.add("hide");
          } else {
            elHeader.classList.remove("hide");
          }
      };

    window.addEventListener("scroll", () => {
      scrollPos = window.scrollY;
      requestAnimationFrame(stickyClose);
    });
  },
  spyScrolling() {
    let scrollPos;
    const sections = document.querySelectorAll(".hero");

    let scrollActiveUrl = () => {
      for (let s in sections) {
        if (
          sections.hasOwnProperty(s) &&
          sections[s].offsetTop <= scrollPos + 150
        ) {
          const id = sections[s].id;
          document.querySelector(".active").classList.remove("active");
          document.querySelector(`a[href*=${id}]`).classList.add("active");
        }
      }
    };

    window.addEventListener("scroll", () => {
      scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
      requestAnimationFrame(scrollActiveUrl);
    });
  }
  init(){
    this.stickyNearOfferClose();
    this.spyScrolling()
  }
};

0
Tuna 11 नवम्बर 2020, 23:38

1 उत्तर

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

हां, प्रत्येक स्क्रॉल ईवेंट पर फ़ंक्शन में वेरिएबल को फिर से बनाया जाएगा। लेकिन आपके मामले में, आप थोड़ा बचाने के लिए फ़ंक्शन के बाहर कुछ चर डाल सकते हैं।

एमडीएन के अनुसार, आपको सीधे फंक्शन में महंगे डीओएम मैनिपुलेशन को कॉल नहीं करना चाहिए। इसके बजाय, requestAnimationFrame(), setTimeout(), या CustomEvent का उपयोग करके ईवेंट को थ्रॉटल करने की अनुशंसा की जाती है। आप यहां पर और जान सकते हैं।

आपके कोड का बेहतर उदाहरण निम्नलिखित है:

let scrollPos;
const elHeader = document.querySelector("header");
const elOffer = document.querySelector(".offer");
// Note: I'm assuming that `documentOffset` don't need to be updated on every scroll events.
//       Update it as `scrollPos` if it need to be updated on every scroll events.
const documentOffset = elOffter.offsetTop;;

const stickyNearOfferClose = () => {
  
  // Note: Please move the following line in the scroll event 
  //       if it's also needed to be called on every scroll events.
  elHeader.classList.toggle("sticky", window.scrollY);

  if (scrollPos >= documentOffset) {
    elHeader.classList.add("hide");
  } else {
    elHeader.classList.remove("hide");
  }
};


window.addEventListener("scroll", function () {
  scrollPos = window.scrollY;
  requestAnimationFrame(stickyNearOfferClose);
});
0
Zugor 12 नवम्बर 2020, 04:39