CODEWITHSUNDEEP
javascriptjquerywordpress
Paul Stephen Davis
Paul Stephen Davis

Reputation: 153

Prevent Jquery Window scroll when responsive nav menu open

I am trying to prevent my responsive nav menu from disappearing whilst open due to window scroll function, how can i disable the function whilst the nav menu is open as I want the menu to stay fixed and not disappear until the menu is closed again?

Javascript for window and opening nav

    $(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $(".wrapper").show();   
    } else {
        $(".wrapper").hide();    
    }
    this.previousTop = currentTop;
});

    $(document).ready(function() {
       $('#hamburger').click(function() {
           var clicks = $(this).data('clicks');
           if (clicks) {
           $('.responsive-nav').toggleClass('responsive-nav-view');
           }
           else {
           $('.responsive-nav').toggleClass('responsive-nav-view');
           }
           $(this).data("clicks", !clicks);
       });
   });

Here is my function for the animated button for the hamburger responsible for opening closing the responsive nav

 $(document).ready(function(){
    $('#hamburger').click(function(){
       $(this).toggleClass('open');
    });
 });

the site in question is http://testsiteclash.co.uk

Thanks

Upvotes: 0

Views: 595

Answers (1)

Razzildinho
Razzildinho

Reputation: 2584

I think what you want to do is put a check in the function that shows/hides .wrapper

To just keep menu open

if (currentTop < this.previousTop) {
    $(".wrapper").show();   
} else if (!$('#hamburger').hasClass('open')) {
    $(".wrapper").hide();    
}

To stop window scroll

$(window).scroll({previousTop: 0}, function (e) {
    if ($('#hamburger').hasClass('open')){
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $(".wrapper").show();   
    } else {
        $(".wrapper").hide();    
    }
    this.previousTop = currentTop;
});

Upvotes: 0

Related Questions