Question

我通过点击我的按钮cd-btn切换我的面板，该按钮调用一个新类.cd-panel.is-visible

 jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
    event.preventDefault();
    $('.cd-panel').toggleClass('is-visible');
});

.is-visible class：

 .cd-panel.is-visible {
  visibility: visible;}

我希望在面板打开或可见时阻止身体滚动。到目前为止，我通过以下方式实现了这一目标：

$(".cd-panel").mouseenter(function(){
  $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
  $("body").css("overflow", "visible");
});

仅当我用鼠标进入或离开面板时才有效。但我想通过打开面板来实现这一目标。如何在面板打开时向主体添加overflow：hidden样式，然后当我关闭它时，它会将溢出变为可见。我还想添加位置：当我的面板打开时固定到正文，它将返回到关闭面板后的相对位置

Answer 1

在此处设置.css：

$('.cd-btn').on('click', function(event){
  event.preventDefault();
  $('.cd-panel').toggleClass('is-visible');
  if ($('.cd-panel').is(":visible"))
    $("body").css("overflow", "hidden");
  else
    $("body").css("overflow", "visible");
});

Answer 2

我可能已经通过阅读你的（OP）＆amp;来找出问题所在。 @ Praveen-Kumar评论。

不要检查:visible，只需检查该元素是否具有类is-visible，最终决定该元素是否可见。

所以你的代码变成......

$('.cd-btn').on('click', function(event){
  event.preventDefault();
  $('.cd-panel').toggleClass('is-visible');
  if ($('.cd-panel').hasClass("is-visible")) // Changed this line from your link.
    $("body").css("overflow", "hidden");
  else
    $("body").css("overflow", "visible");
});

Answer 3

$('.cd-btn').on('click', function(event){ 
    event.preventDefault(); 
    $('.cd-panel').toggleClass('is-visible'); 
    if ($('.cd-panel').hasClass("is-visible")) { 
        $('body').css('height', '100%'); 
        $("body").css("overflow", "hidden"); 
    } else {
        $("body").css("overflow", "visible"); 
        $('body').css('height', 'auto'); 
    }
});

侧面板打开时防止车身滚动

3 个答案: