How To Make Sticky Header And Sidebar | हिन्दी में जानकारी

How To Make Sticky Header And Sidebar

नमस्कार दोस्तों Sticky Header And Sidebar आपके ब्लॉग को सुन्दर और सक्षम बनाती है, जिसके माध्यम से विसिटर्स को चूस पेज पर जाना आसान और सरल हो जाता है, ब्लॉगर के लिए पहले से बहुत सी ऐसी थीम्स आती हैं, जिनके Sticky Header And Sidebar पहले ही होते हैं .

परन्तु कुछ थीम्स ऐसी भी होती हैं जो आपको अच्छी लगती हैं लेकिन उनकी Sticky Header And Sidebar नहीं होते, तो आज मैं आपको बताऊंगा के कैसे अपनी कोई भी थीम के Sticky Header And Sidebar क्रिएट कर सकते हैं .

ध्यान रहे, ये ट्रिक मात्र ब्लोग्गेर्स और HTML थीम्स के लिए है, तो चलिए 

सबसे पहले आप अपने ब्लॉग के थीम ओपिसन को सेलेक्ट करें, और Edit HTML

पर क्लिक करें .

उसके बाद CTRL+F दबाएँ </style> सर्च कीजिए और बिलकुल ठीक इसके नीचे, नीचे दिए कोड को पेस्ट कीजिए

CSS/* Style the header */
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}

अब

/body

सर्च कीजिए और ठीक ऊपर नीचे दिए दिए कोड को

script

में टैग कीजिए

Jquerywindow.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
  

ये सब होने के बाद आप जिस भी एलिमेंट को sticky बनाना चाहते हैं, उसमें सिम्पली

id="lb"

ऐड कीजिये और थीम को सेव कर दीजिए

तो ये जानकारी आपको कैसी लगी, कमेंट बॉक्स में जरूर बताएं

Share Share Tweet Share Share Share