सीएसएस, एचटीएमएल और jQuery का उपयोग करके स्क्रॉल पर एक हेडर को ठीक करना

एक हेडर बनाना जो पृष्ठ को नीचे स्क्रॉल करने पर स्थिर रहता है एक है सामान्य डिज़ाइन आवश्यकता। इसे CSS, HTML और JavaScript (jQuery) के संयोजन का उपयोग करके प्राप्त किया जा सकता है।

CSS, HTML के साथ कार्यान्वयन

CSS स्थिति प्रदान करता है: निश्चित; संपत्ति, जिसे स्क्रॉलिंग की परवाह किए बिना, पृष्ठ पर अपनी स्थिति ठीक करने के लिए किसी तत्व पर लागू किया जा सकता है। हालाँकि, यह निर्धारित करने के लिए एक ट्रिगर बिंदु की आवश्यकता होती है कि तत्व कब ठीक हो जाना चाहिए। हेडर तत्व पर निश्चित वर्ग कब लागू करें। jQuery का उपयोग करके, स्क्रॉल घटनाओं का पता लगाने और तदनुसार निश्चित वर्ग को जोड़ने या हटाने के लिए एक सरल स्क्रिप्ट लिखी जा सकती है।

HTML Code

सीएसएस कोड

.निश्चित { स्थिति: निश्चित; शीर्ष: 0; बाएँ: 0; चौड़ाई: 100%; }

jQuery कोड

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

$(window).scroll(function(){ वर चिपचिपा = $('.चिपचिपा'), स्क्रॉल = $(विंडो).स्क्रॉलटॉप(); यदि (स्क्रॉल >= 100) चिपचिपा.एडक्लास('निश्चित'); अन्यथा चिपचिपा.निकालेंवर्ग('निश्चित'); });

इस उदाहरण में, स्क्रॉल स्थिति (स्क्रॉलटॉप) 100 पिक्सेल से अधिक होने पर निश्चित वर्ग को चिपचिपा तत्व पर लागू किया जाता है। आप अपनी विशिष्ट डिज़ाइन आवश्यकताओं के आधार पर इस मान को समायोजित कर सकते हैं। ऑफसेट().टॉप का उपयोग करके गतिशील रूप से निर्धारित किया जाता है।

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

यह कोड गतिशील रूप से चिपचिपा तत्व की ऊर्ध्वाधर स्थिति को मापता है और व्यूपोर्ट के शीर्ष पर पहुंचने पर इसे ठीक करता है।

इन तकनीकों को मिलाकर, आप एक चिपचिपा हेडर बना सकते हैं सीएसएस, एचटीएमएल, और jQuery।