CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steven LUU
Steven LUU

Reputation: 13

Can I reset a jQuery sticky navbar function?

I'm new here and I'm facing a little problem with a jQuery script I'm using to change my CSS when my sticky navbar scrolls over a certain section.

First, I'm using one class called ".stickychange", which is the trigger for the jQuery function. On this section, I'm using a background-image (one picture I've taken personally), and I want my white navbar to become transparent black when it's over this said section. And it's working like a charm. But after this section, I have a white section and I want my navbar to take its default style, but it doesn't. If I'm scrolling back to the top, it's taking its default settings, but if I'm scrolling past the .stickychange, it would stay with the tweaked CSS styles.

Do you know how to reset a function, or at least, stop it when it reaches a certain point?

Here's the code, it's a basic code if you wanna change styles on elements while scrolling : 

 var scroll_start = 0;
 var startchange = $(".stickychange");
 var offset = startchange.offset();

 if (startchange) {
     $(document).scroll(function () {
         scroll_start = $(this).scrollTop();
         if (scroll_start > offset.top) {
             $("#menu_top").css('background-color', 'rgba(0,0,0,0.5)');
             $("#menu_top").css('transition', 'all 0.2s ease-in');
             $("#menu_top a").addClass("stickyspecial");
            $("#menu_top h2").addClass("stickyname");
         } else {
             $('#menu_top').css('background-color', '#fff');
             $('#menu_top a').removeClass("stickyspecial");
             $('#menu_top h2').removeClass("stickyname");
         }
     });
 }

Thanks, guys in advance! :)

Upvotes: 1

Views: 169

Answers (1)

Patrick Mlr
Patrick Mlr

Reputation: 2965

Get the height of the div and add this to your if.

 var scroll_start = 0;
 var startchange = $(".stickychange");
 var offset = startchange.offset();

 // Get the height with padding and border
 // You could use .height() if you just want the height of the div.
 var endchange = startchange.outerHeight(); 

 if (startchange) {
     $(document).scroll(function () {
         scroll_start = $(this).scrollTop();
         if (scroll_start > offset.top && scroll_start < offset.top + endchange) { //<- Add it here  
             $("#menu_top").css('background-color', 'rgba(0,0,0,0.5)');
             $("#menu_top").css('transition', 'all 0.2s ease-in');
             $("#menu_top a").addClass("stickyspecial");
            $("#menu_top h2").addClass("stickyname");
         } else {
             $('#menu_top').css('background-color', '#fff');
             $('#menu_top a').removeClass("stickyspecial");
             $('#menu_top h2').removeClass("stickyname");
         }
     });
 }

If you're using margin on the div and want it to be applied, use .outerHeight(true).

Upvotes: 1

Related Questions