Toggle CSS on scroll

Tell at what pixel from the top the CSS should be triggered, in this example i’m targeting the navbar with id=”topnav”. You also need JQuery for this to work.

    var scroll = $(window).scrollTop();
      if (scroll > 100) {
        $("#topnav").css("transition" , "background-color 1.5s ease");
        $("#topnav").css("background" , "black");
      } else {
        $("#topnav").css("background" , "transparent");

You could use .addClass and .removeClass instead of .css


By Nimpen J. Nordström

System Developer and Network Security Enthusiast

Leave a Reply

Your email address will not be published. Required fields are marked *