How to replace HTML class when scroll with jquery -


  & lt; & lt; हैडर & gt; & lt; nav class = "navbar navbar- डिफॉल्ट टॉप-पोस्टियन navbar-up" भूमिका = "नेविगेशन" & gt; & Lt; div वर्ग = "कंटेनर-द्रव" & gt; & Lt;! - ब्रांड और टॉगल को बेहतर मोबाइल डिस्प्ले के लिए समूहबद्ध किया जाता है - & gt; & Lt; div class = "navbar-header" & gt; & lt; बटन प्रकार = "बटन" वर्ग = "नेविबार-टॉगल ढह गई" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# बीएस-उदाहरण-नेविबार-पतन-1" & gt; & Lt; span class = "sr-only" & gt; टॉगल नेविगेशन & lt; / span & gt; & Lt; span class = "icon-bar" & gt; & lt; / span & gt; & Lt; span class = "icon-bar" & gt; & lt; / span & gt; & Lt; span class = "icon-bar" & gt; & lt; / span & gt; & Lt; / बटन & gt; & Lt; एक क्लास = "नेवबार-ब्रांड" href = "#" & gt; & lt; आईएमजी src = "चित्र / कोटाकुकू-आइकॉन पेज" & gt; Kotakku & lt; / a & gt; & Lt; / div & gt; & Lt;! - टॉगलिंग के लिए नेवी लिंक्स, फ़ॉर्म और अन्य सामग्री लीजिए - & gt; & Lt; div वर्ग = "पतन नवबार-पतन" id = "bs-example-navbar-collapse-1" & gt; & Lt; ul class = "nav navbar-nav navbar-tab navbar-right navbar-menu" role = "tablist" & gt; & Lt; li & gt; & lt; a href = "# घर" & gt; होम & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "# उत्पाद" & gt; उत्पाद & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "# टीम" & gt; टीम & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "# संपर्क" & gt; संपर्क & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & lt; / div & gt; & lt;! - /.navbar- -collapse- & gt; & lt; / div & gt; & lt;! - /.container-fluid - & gt; & Lt; / नव & gt;   

स्क्रॉल करते समय नवबार-डाउन के साथ नवबार-अप क्लास को कैसे बदलें और पृष्ठ के शीर्ष तक स्क्रॉल करते समय फिर वर्ग लौटाता है toggleclass :

  $ ('नेवि')। ToggleClass ("navbar-up navbar-down");   

और आप इस कोड को विंडो स्क्रॉल हैंन्डलर में डाल सकते हैं:

  $ (window) .scroll (function () { // कुछ तर्क यहाँ});   

अंतिम कोड:

  $ (विंडो) .scroll (function () {var scroll = $ (window) scrollTop (); // आप अपनी स्थिति यहां कर सकते हैं यदि (स्क्रोल == 0) {$ ('। navbar-down')। toggleClass ("navbar-up navbar-down");} और {$ (' navbar-up ')। toggleClass ("navbar-up navbar-down");}}};   

इस तरह से जब nav ने navbar-up वर्ग और navbar-up को स्क्रॉल किया जाता है navbar-down < / code> और बनाम जब यह navbar-down है और शीर्ष पर स्क्रॉल किया जाता है तो यह navbar-up

में बदल जाता है आप डेमो देख सकते हैं: < / P>

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -