点击按钮禁止滚动

Tong0068 2018-12-02 06:21:50

点击菜单按钮右侧会滑出菜单，这时应该让页面不可滑动，我知道
body, html {
width: 100%;
height: 100%;
}
再加上overflow: hidden;可以实现，
但由于头部要在下拉时变色，所以html的高必须是auto,这样就会使页面弹回最顶部，
想来问问有什么办法可以解决

我的代码如下：
html:
<div class="main-left" style="background-color: #ff75ff">
</div>
<div class="main" id="main">
<div class="zong" id="zong"></div>
<div class="header-top">

<div class="caidan">
<img src="images/icon-top.png">
</div>
</div>

<div style="height: 300px;background-color: #0081dd"></div>
<div style="height: 300px;background-color: #00dd8a"></div>
<div style="height: 300px;background-color: #0081dd"></div>
<div style="height: 300px;background-color: #00dd8a"></div>
</div>

js:
$(".caidan").click(function () {
$(".main-left").addClass("on");
$(".main").addClass("on");
$(".zong").show();
$(".zong").click(function () {
$(".main-left").removeClass("on");
$(".main").removeClass("on");
$(".zong").hide();
})
})

function scroll() {
var top = 1;//获取导航栏变色的位置距顶部的高度
var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度
if (scrollTop < top) {
$('.header-top').removeClass("menu_bg");
} else {
$('.header-top').addClass("menu_bg");
}
}
$(window).on('scroll', function() {
scroll()
});

css:
body, html {
width: 100%;
height: auto;
}

.main-left {
width: 72%;
height: 100%;
background-color: #ffffff;
position: fixed;
left: -72%;
top: 0;
transition: all .5s;
}
.main-left.on {
left: 0%;
}

.main {
width: 100%;
height: 100%;
display: inline-block;
margin-left: 0;
transition: all .5s;
position: relative;
}

.main.on {
height: 100%;
overflow: hidden;
margin-left: 72%;
}

.zong {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 9999;
transition: all .5s;
overflow: hidden;
}
.menu_bg {
background-color: rgba(255, 255, 255, .8);
width: 100%;
}
.header-top-2 {
height: 75px;
width: 100%;
}

...全文