हेल्लो दोस्तों, Shrink Navbar on Scroll को HTML CSS एवं Java Code के माध्यम से बनाने के लिए आप नीचे दिए गए Process को अपनाये या नीचे दिये गए Code को आप अपने ब्लॉग या वेबसाइट पर अपने अनुसार Paste करे उसके बाद आप अपने वेबसाइट पर उक्त Effect को देख पाएंगे
Shrink Navbar on Scroll Demo
आप नीचे दिखाए गए डेमो की तरह अपने ब्लॉग पर इस तरह के Effect को कर सकते है
Shrink Navbar on Scroll CSS Code
अब हम आपको उपरोक्त दिखाए गए Demo के प्रोजेक्ट का CSS Code दे रहे है इसके अंतर्गत आप अपने अनुसार कस्टमाइज कर सकते है
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #ffc107a6;
padding: 50px 15px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
height:80px
}
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 30px;
font-weight: bold;
transition: 0.4s;
}
#navbar a:hover {
background-color: #ffc107;
color: black;
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px !important;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}
}
उपरोक्त दिए गए Shrink Navbar on Scroll के CSS Code में आप Navbar, Navbar Font, Color, Size, Padding, एवं कई अन्य तरह के बदलाव कर सकते है
Shrink Navbar on Scroll HTML Code
अब हम आपको नीचे कुछ HTML Code Provide जिसमे आप दिए गए Logo एवं लिखे गए Text में संशोधन कर सकते है
<div id="navbar">
<a href="#default" id="logo">Logo</a>
<div id="navbar-right">
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
</div>
<div style="margin-top:210px;padding:15px 15px 1000px;font-size:30px">
<p>आप चाहे तो अपने अनुसार कोई शब्द यहाँ लिख सकते है </p>
</div>
ऊपर दिए गए HTML Code में आप अपने Logo के img के लिंक को Paste कर सकते है तथा Page के लिंक को # के साथ Replace कर सकते है
Shrink Navbar on Scroll Java Code
नीचे दिए गए Java Code में आप Nabvar के Padding, Font एवं Logo के साइज़ को बदल सकते है
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "15px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("navbar").style.padding = "60px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
अब इस तरह से हमारा Shrink Navbar on Scroll Project तैयार हो चूका है आप ऊपर या नीचे दिए गए Code के Copy Code वाले बटन पर click करके कोड को कॉपी कर सकते है