如何在切换移动导航时阻止滚动

时间:2017-12-16 19:40:43

标签: javascript jquery html css mobile

我使用HTML CSS和BS3制作的网站的移动导航是非常基本的。但是当我切换汉堡包按钮时,我想要禁用身体其他部分的滚动。

我的问题是,当它打开时,你不能滚动,这就是我想要的。但是当您关闭菜单时,它不起作用。

下面是一些HTML:

  <!--        mobile nav links-->
              <div class="mob-div-nav">
                <div class="row">
                  <div class="col-xs-12" style="height:100%;">

                  </div>
                </div>
              </div>
      <!--        END Mobile Nav-->

这是Js:

  $("#hamburger").on("click", function (event){

  $(".mob-div-nav").slideToggle(500);

  function noscroll() {
  window.scrollTo( 0, 0 );
}
  // add listener to disable scroll

  if ($(".mob-div-nav").css("display") == "block"){

    window.addEventListener('scroll', noscroll);

    } else if ($(".mob-div-nav").css("display") == "none") {

      window.removeEventListener('scroll', noscroll);

    }
});

1 个答案:

答案 0 :(得分:0)

使用函数内部的if语句不在外面..你的代码应该是这样的

$(document).ready(function(){
  // #hamburger click event
  $("#hamburger").on("click", function (event){
    $(".mob-div-nav").slideToggle(500);
  }); // End of #hamburger click event
  // window scroll event
  $(window).on('scroll' , noscroll);
});

// functions here
// noscroll function
function noscroll() {
  if ($(".mob-div-nav").is(':visible')){
    window.scrollTo( 0, 0 );
  }
}

<强>解释

  • $(document).ready(function(){ - 文档准备就绪时read Here
  • window.addEventListener是纯粹的javascript,$(window).on('scroll'是jquery .. jQuery .on(); vs JavaScript .addEventListener();
  • .is(':visible')是一个jquery函数检查元素是否可见,:hidden如果元素被隐藏,:checked如果被选中等等......你可以阅读{{3} }