Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर एक निश्चित/चिपचिपा शीर्षलेख कैसे बनाएं?

<घंटा/>

CSS और JavaScript के साथ स्क्रॉल पर फिक्स्ड/स्टिकी हेडर बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0px;
      padding: 0px;
      height: 150vh; /*To produce scroll bar*/
   }
   .header {
      width: 100%;
      background-color: rgb(52, 21, 110);
      color: white;
      padding: 50px;
      font-size: 20px;
   }
   div.sticky {
      position: fixed;
      top: 0;
   }
</style>
</head>
<body>
<h1>Fixed Sticky on scroll example</h1>
<h2>Random Header Text</h2>
<h2>Randorm Header Text</h2>
<div class="header">Header Text</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse 
consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum 
veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro 
quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni 
aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, 
veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis 
incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis 
ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere 
cupiditate reprehenderit tempore veritatis eum accusamus omnis
tempora quos!
</p>
<script>
   window.onscroll = function() {
      setSticky();
   };
   var header = document.querySelector(".header");
   var sticky = header.offsetTop;
   function setSticky() {
      if (window.pageYOffset > sticky) {
         header.classList.add("sticky");
      }
      else {
         header.classList.remove("sticky");
      }
   }
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर एक निश्चित/चिपचिपा शीर्षलेख कैसे बनाएं?

थोड़ा नीचे स्क्रॉल करने पर हेडर स्टिकी हेडर की तरह काम करेगा -

सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर एक निश्चित/चिपचिपा शीर्षलेख कैसे बनाएं?


  1. CSS और JavaScript के साथ अकॉर्डियन कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ एक अकॉर्डियन बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background-color: #eee;    c

  1. सीएसएस के साथ एक निश्चित/चिपचिपा पाद लेख कैसे बनाएं?

    CSS के साथ निश्चित पादलेख बनाने के लिए, कोड इस प्रकार है - उदाहरण body{ font-family:Segoe UI , ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .पाद लेख {फ़ॉन्ट-आकार:20px; स्थिति:निश्चित; बाएं:0; नीचे:0; चौड़ाई:100%; पृष्ठभूमि-रंग:आरजीबी (50, 6, 100); रंग सफेद; पाठ-संरेखण:केंद्र; }फिक्स्ड/स्टिकी फूटर उदाहर

  1. सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर हेडर को कैसे सिकोड़ें?

    सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर हेडर को सिकोड़ने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-fa