मैं एक स्क्रिप्ट बनाना चाहता था जो स्क्रॉल करते समय div आईडी के साथ header को पतला और जब आप पृष्ठ के शीर्ष पर वापस जाते हैं तो मोटा हो जाता है। लेकिन मुझे एक समस्या है: जब मैं नीचे स्क्रॉल करता हूं, header पतला हो जाता है, लेकिन जब मैं पृष्ठ के शीर्ष पर वापस जाता हूं, तो यह मोटा नहीं होता है, और यह भी कि यदि आप वेब-पेज को कहीं पर पुनः लोड करते हैं बीच में और फिर आप ऊपर जाते हैं, header केवल एक बार मोटा हो जाता है।

मैंने क्या गलत किया?

var head = document.getElementById('header');
var height = 100;
var sourceCoord = head.getBoundingClientRect().top + window.pageYOffset;
var id;

document.addEventListener("scroll", function() {
  if (window.pageYOffset > sourceCoord) {
    id = setInterval(function() {
      if (height == 50) clearInterval(id);
      else {
        height--;
        head.style.height = height + "px";
      }
    }, 10);
    head.style.position = 'fixed';
  } else if (window.pageYOffset <= sourceCoord) {
    id = setInterval(function() {
      if (height == 100) clearInterval(id);
      else {
        height++;
        head.style.height = height + "px";
      }
    }, 10);
    head.style.position = "absolute";
  }
});
<div id="header"></div>
0
Yehor Sorokin 30 अप्रैल 2018, 13:59

1 उत्तर

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

समस्या यह है कि आप पृष्ठ लोड होने पर sourceCoord की गणना करते हैं, जबकि यह वास्तव में स्क्रॉल करने पर बदलता है। इसे स्क्रॉल श्रोता में शामिल करें और आपको अच्छा होना चाहिए।

0
giorgio 30 अप्रैल 2018, 14:02