👨🏼‍🎓 👨🏿‍🎓 🏳️‍🌈 JQuery के पॉपअप निश्चित नेविगेशन 📆 👩🏻‍💼 🚈

फिक्स्ड पॉप-अप नेविगेशन

मैं आपको नेविगेशन बार दिखाना चाहता हूं जो पृष्ठ सामग्री को नीचे तक स्क्रॉल करते हुए दिखाई देता है, और अपनी जगह पर बना रहता है।
मैं इसे jQuery कार्यान्वयन के लिए उपयोग करूंगा, ताकि IE सहित संगतता हो।
इस तरह का नेविगेशन वेब डिज़ाइन का काफी लोकप्रिय तत्व है। वे अक्सर कई वेब साइटों पर पाए जा सकते हैं।

मैं लिंक की एक क्षैतिज सूची के लिए एक कंटेनर के रूप में HTML5 नौसेना तत्व का उपयोग करूंगा।

चरण 1

नेविगेशन कंटेनर

मैं HTML5 से पहले से परिचित हूं। इस उदाहरण में, मैं उनमें से दो का उपयोग करता हूं :: और। मैं निम्नलिखित मार्कअप से शुरू करूँगा:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="styles.css" /> <!--    . --> </head> <body> <nav id="hide">”<!— . --> <ul> <li><a href="#link-1" class="selected"></a></li> <li><a href="#link-2"> I</a></li> <li><a href="#link-3"> II</a></li> <li><a href="#link-4"> III</a></li> <li><a href="#top" id="go-top">⇑  ⇑</a> </li> </ul> </nav> <div class=wrapper> <h1> .</h1> <section id=" link-1">  ...</section> </div> </body> </html>

चरण 2

हम एक सभ्य दृष्टिकोण में लाते हैं ।

Style.css में id = "hide" सेट स्थिति: निश्चित; और बाकी सब कुछ विशेष रूप से आपके स्वाद और रंग के लिए है।

 #hide { width:100%; height:40px; padding: 20px 0; position: fixed; top: 0px; margin:0px; background-color:#287455; text-align:center; opacity:0.9; filter:alpha(opacity=90); -moz-opacity:0.9; } #hide li a { text-decoration: none; font-size: 20px; color: #000; font-weight: bold; display: inline-block; width: 120px; text-align: center; padding: .80px 16px; } nav li a:hover, nav li a.selected { color: #000; z-index:5; background: #40bfe8; }

चरण 3

JQuery कोड

निम्नलिखित जावास्क्रिप्ट कोड है। यह # हाईड तत्व को छुपाता है। यह ऊपरी स्क्रॉलटॉप स्क्रॉलबार के स्थिति मूल्य की जांच करता है, और यदि यह 100 से अधिक है, तो # उच्च तत्व प्रदर्शित करता है, अन्यथा यह इसे छुपाता है। कोड का अगला भाग "ऊपर" बटन पर क्लिक करने की घटना को संभालने का कार्य है - # गो-टॉप। यदि एक बटन क्लिक किया जाता है, तो बॉडी टैग का स्क्रॉलटॉप मान 0 पर सेट हो जाएगा।

 <script src="jquery-1.6.4.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#hide").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#hide').fadeIn(); } else { $('#hide').fadeOut(); } }); $('#go-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>

यहाँ मेरा स्रोत है
डेमो

JQuery के पॉपअप निश्चित नेविगेशन

More articles: