Скрыть div в прокрутке - PullRequest
Новая
       36

Скрыть div в прокрутке

0 голосов
/ 17 июня 2020

У меня есть div, который мне нужно скрывать при прокрутке вверх и вниз, если у него есть классы 1 и 2, поскольку эти классы отображают div на странице. 

<div id="mydiv" class="class1 class2">MyContent</div>

Как мне этого достичь?

Спасибо

1 Ответ

1 голос
/ 17 июня 2020

Bootstrap имел класс show для элемента dropdown-menu, пока он открыт. Вы должны просто удалить этот класс при запуске window.onscroll. 

window.onscroll = (e) => {
  var dropdowns = document.querySelectorAll(".dropdown-menu");
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].classList.remove("show");
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div>
<p>
  BLANK<br/><br/><br/>
  BLANK<br/><br/><br/>
  BLANK<br/><br/><br/>
</p>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
<p>
  BLANK<br/><br/><br/>
  BLANK<br/><br/><br/>
  BLANK<br/><br/><br/>
</p>
</div>
...