Removing and adding class via .js

Question

I'm working on a header banner that is hidden at the start but appears when the user scrolls down on the page. When the user scrolls back up to the top of the page it should disappear again and keep doing it until the user exits (there is an exit button on the banner which adds a cookie so if the user exits it won't show again).

The issue I'm having is that either the banner won't show up again when I scroll back up to the top of the page, or it will just keep showing up even after exiting. I've tried several options but nothing has worked so far.

function desktopHeader() {
  $(window).on('scroll', function() {
    console.log( $(this).scrollTop() );
  });

  var $headerBanner = $('.module-header-banner');

  $('.close-btn').on("click", function () {
    $.cookie("headerbanner", "exit", {expires: 2/24});
    $('.module-header-banner').addClass("exit").fadeOut();
  });

  if($.cookie('headerbanner') == null) {
    if($(window).scrollTop() > $('.site-header').height()){
      $headerBanner.addClass('active').fadeIn();
    } 

    $(window).scroll(function() {
      if($(window).scrollTop() > $('.site-header').height()){
        $headerBanner.addClass('active');
      } else if($(window).scrollTop() < $('.site-header').height()) {
        $headerBanner.removeClass('active');
      }
    });
  }
}

At a loss -- if anyone has any advice would be best appreciated. Thanks!

Event handlers are usually supposed to be added once; you are adding a new scroll handler each time the button is clicked. — user5734311
– user5734311, Commented Jan 9, 2019 at 14:12

programtreasures · Accepted Answer · 2019-01-09 14:10:21Z

Try to add your scroll event outside of the click function, here is a updated code

function desktopHeader() {
$(window).on('scroll', function() {
    console.log( $(this).scrollTop() );
});

var $headerBanner = $('.module-header-banner');

$('.close-btn').on("click", function () {

    $.cookie("headerbanner", "exit", {expires: 2/24});

    $('.module-header-banner').addClass("exit").fadeOut();
    });

    if($.cookie('headerbanner') == null) {

    if($(window).scrollTop() > $('.site-header').height()){
            $headerBanner.addClass('active').fadeIn();
    } 

}


    $(window).scroll(function() {
        if($(window).scrollTop() > $('.site-header').height()){
                $headerBanner.addClass('active');
        }   

        else if($(window).scrollTop() < $('.site-header').height()) {
            $headerBanner.removeClass('active');
        }
    });

}

Works great, thanks! If I wanted to add a time delay to the addClass, do you know how I can do that? Just so the class 'active' doesn't appear immediately on scroll

Collectives™ on Stack Overflow

Removing and adding class via .js

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related