స్క్రోల్ చేసినప్పుడు మెనూ మరదు చేయడం ఎలా సృష్టించాలి
CSS మరియు JavaScript ఉపయోగించి క్రిందకు స్క్రోల్ చేసినప్పుడు నేవిగేషన్ మెనూ మరదు చేయడం నేర్చుకోండి.
క్రిందకు స్క్రోల్ చేసినప్పుడు నేవిగేషన్ బార్ మరదు చేయండి
మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి:
నేవిగేషన్ బార్ సృష్టించండి:
<div id="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div>
రెండవ చర్య - సిఎస్ఎస్ జోడించండి:
నేవిగేషన్ బార్ శైలిని అమర్చు:
#navbar { background-color: #333; /* కాలిని బ్యాక్గ్రౌండ్ రంగు */ position: fixed; /* అంటే అధికారికంగా అంటే స్థిరంగా ఉంచు */ top: 0; /* పైకి ఉంచు */ width: 100%; /* పూర్తి వెడల్పు */ transition: top 0.3s; /* క్రిందకు (పైకి) స్క్రోల్ చేసినప్పుడు ట్రాన్సిషన్ ప్రభావం */ } /* నేవిగేషన్ బార్ లింకుల శైలిని అమర్చు */ #navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; } #navbar a:hover { background-color: #ddd; color: black; }
మూడవ చర్య - జావాస్క్రిప్ట్ జోడించండి:
/* వినియోగదారు క్రిందకు స్క్రోల్ చేసినప్పుడు, నేవిగేషన్ బార్ మరదు. వినియోగదారు పైకి స్క్రోల్ చేసినప్పుడు, నేవిగేషన్ బార్ చూపు. */ var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; }