check this
https://jsfiddle.net/rkv88/ugy3rL0d/
the problem is that the toggle doesn’t make the element hidden immediately its delayed
so you need to check first if the element is hidden (we will show div now)
then { hide body scroll }else{ show body div }
after that toggle the div element
I am trying to hide the body scrollbar on click, however I got 2 buttons… so I think I need to know if the body is visible or not.
The current state is that when I toggle back the body scrollbar disapears.
Im bad at explaining so here is a Fiddle: https://jsfiddle.net/agq8rb47/
I’m trying to avoid getting two scrollbars on the toggled divs, Like this: https://jsfiddle.net/ca9Lghp3/
$(document).ready(function() {
$("#yy").click(function() {
$("#why").slideToggle();
$("body").css({
"position": "sticky",
"overflow": "hidden"
});
$("#tts").css("display", "none");
if ($("#why").is(":hidden") && $("#tts").is(":hidden")) {
$("body").css({
"position": "static",
"overflow": "auto"
});
}
});
$("#tt").click(function() {
$("#tts").slideToggle();
$("body").css({
"position": "sticky",
"overflow": "hidden"
});
$("#why").css("display", "none");
if ($("#why").is(":hidden") && $("#tts").is(":hidden")) {
$("body").css({
"position": "static",
"overflow": "auto"
});
}
});
});body {
margin: 0;
position: static;
overflow: auto;
}
#barbar {
height: 10%;
width: 100%;
background-color: rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}
#why {
width: 100%;
height: 90%;
background-color: yellow;
z-index: 2;
display: none;
position: fixed;
overflow-y: scroll;
bottom: 10%;
}
#tts {
width: 100%;
height: 90%;
background-color: green;
z-index: 2;
display: none;
position: fixed;
overflow-y: scroll;
bottom: 10%;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="barbar">
<i class="fa fa-youtube fa-3x" aria-hidden="true" id="yy"></i>
<i class="fa fa-list fa-3x" aria-hidden="true" id="tt"></i>
</div>
<p>
ad
</p>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
ad
</p>
<div id="why">
</div>
<div id="tts">
</div>It’s pretty unclear what you are trying to achieve. Please, try to become better at explaining things, especially when looking for help.
to avoid getting 2 scrollbars, change overflow:scroll to overflow:auto; Aside from that I don’t understand what you mean by knowing if the body is visible or not?
i’m very happy to help