Если div скрыт, сделайте это

Question

Я пытаюсь скрыть полосу прокрутки тела при нажатии, однако у меня есть 2 кнопки ... поэтому я думаю, что мне нужно знать, видно ли тело или нет.

Текущее состояние таково, что при переключении назад полоса прокрутки тела исчезает.

Я плохо объясняю, так что вот скрипка: https://jsfiddle.net/agq8rb47/

Я пытаюсь избежать получения двух полос прокрутки на переключаемых элементах div, например: 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>

Answer 1

отметьте это

https://jsfiddle.net/rkv88/ugy3rL0d/

проблема в том, что переключатель не скрывает элемент сразу же после его задержки

, поэтому вы сначала нужно проверить, является ли элемент скрытым (сейчас мы покажем div)
then { hide body scroll }else{ show body div } , после этого переключает элемент div