Sticky NavBar With JQuery | HTML, CSS & JavaScript
Why Stack Overflow recommends it
Stack Overflow users cite it as the source of the sticky navbar code they are building on or adapting when they ask follow-up questions about responsiveness, swapping logos and loading scripts.
Recommended by 0 people across 0 different months, 2018 to 2019.
What it is
A short tutorial by Codegrid showing how to build a scroll-activated sticky navigation bar using jQuery, HTML and CSS. It adds a class to the nav element once the page is scrolled, changing its background.
What people said
Cites Никола Иванов · 2018-02 · Stack Overflow · on “Creating menu bar in css/html responsive”
Hello I want to ask you how to make my menu bar responsive to all devices. I have used that one video: [this video] . When I open it from my laptop everything looks cool but when i try to open it from my other devices ( tablet or my smartphone ) I can't see my menu. $(window).on('scroll', function() { if ($(window).scrollTop()) { $('nav').addClass('black'); } else { $('nav').removeClass('black'); } }) body { margin: 0; padding: 0; font-family: Quicksand; } /*Menu Bar*/ nav { position: fixed; top: 0; left: 0; width: 100%; height: 100px; padding: 10px 100px; box-sizing: border-box; transition: .3s; } nav.black { background: rgba(0, 0, 0, 0.8); height: 100px; padding: 10px 100px; } nav .logo { paddi
Cites Máté Tóth · 2018-05 · Stack Overflow · on “How can I swap a picture using javascript”
I've made this header: [this video] and at the place of the logo, I've inserted a picture, which is black. When I scroll down, I want this image to be white (since the header turns black), so I've made a white version of the same image. However I have no idea where to insert the image. I've been thinking about inserting it in the javascript code, which is the following: $(window).on('scroll', function() { if($(window).scrollTop()) { $('nav').addClass('black'); } else { $('nav').removeClass('black'); } }) How can I swap in this white image using javascript?
Cites Native856 · 2019-09 · Stack Overflow · on “Loading .js files in html”
I wanted to know how loading static .js files looks like Use <script src="{% static 'js/base.js' %}" /> Propably need .js because i will try use this NavBar like here. Login has red frame. [this video] I tried Load from bootstrap: CSS <link rel="stylesheet" href=" [LINK] " integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> JS <script src=" [LINK] " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src=" [LINK] " integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src=" [LINK] " integrity="sha