Question

我试图阻止我的响应式导航菜单在打开时由于窗口滚动功能而消失，如何在导航菜单打开时禁用该功能，因为我希望菜单保持固定并且在菜单关闭之前不会消失再次？

用于窗口和打开导航的Javascript

    $(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);
       });
   });

这是我的汉堡包动画按钮的功能，负责打开关闭响应式导航

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

相关网站为http://testsiteclash.co.uk

由于

Answer 1

我认为您要做的是检查显示/隐藏.wrapper

的功能

只保持菜单打开

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

停止滚动窗口

$(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;
});

响应导航菜单打开时，阻止Jquery窗口滚动

1 个答案: