animate () перемещает контейнер вверх, но содержимое не прокручивается - PullRequest
Новая
       31

animate () перемещает контейнер вверх, но содержимое не прокручивается

1 голос
/ 17 апреля 2019

Сейчас я делаю веб-сайт, который состоит из трех частей:

  • Div, который содержит некоторый текст и фоновое изображение
  • Кнопка, которая переключает div, который содержитнекоторые логотипы и ссылки на другие веб-сайты
  • Липкий нижний колонтитул

Чтобы переключить второй div, я заставил его работать с функцией jQuery slideToggle(), и div с текстами перемещается вверхс функцией animate(bottom: 200px;), но она не работает так, как я хочу, потому что она перемещает текст и фоновое изображение из области просмотра без возможности прокрутки вверх.Из-за этого он отключает половину веб-сайта, и как только я закрываю второй элемент div со ссылками, фон и текст возвращаются обратно в область просмотра.

Есть идеи, как решить эту проблему? 

var flag = true;
$(document).ready(function() {
  $(".toggle-partner").click(function() {
    $(".partner").slideToggle(1000);
    $("span", this).toggleClass("glyphicon glyphicon-menu-up glyphicon glyphicon-menu-down");

    if (flag) {
      $(".background").animate({
        bottom: "200px"
      }, 1000, "linear");
      flag = false;
    } else {
      $(".background").animate({
        bottom: "0px"
      }, 1000, "linear");
      flag = true;
    }
  });
});
html,
body {
  font-family: 'Comfortaa', sans-serif;
  background-color: #ffffff;
  min-height: 100%;
}

.background {
  background: url(bg4.png) #e8f1d5 no-repeat left top;
  background-size: contain;
  height: 100vh;
  position: relative;
}


/* -------- TEXT FORMATIERUNG ----- */

.text {
  text-align: right;
  padding-top: 5%;
  padding-right: 5%;
}

#partner-toggle {
  position: fixed;
  bottom: 50px;
  text-align: center;
}

.partner {
  padding: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
  background-color: rgb(235, 237, 249);
  /* Farbcode #ebedf9 */
  text-align: center;
  display: none;
  height: 150px;
}

.partner img {
  margin: 10;
}

.toggle-partner {
  cursor: pointer;
  background-color: #c1e1f0;
  width: 300px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  padding-top: 10px;
  font-size: 1.2em;
  align-content: center;
  border: none;
}


/* ------ FOOTER ------- */

footer {
  height: 50px;
  position: fixed;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #46a4d2;
  padding: 5px;
  color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="container-fluid background">
    <div class="container-fluid text">
      <p>TEXT<p>
    </div>
  </div>
  <div id="partner-toggle" class="container-fluid">
    <button class="toggle-partner">Kooperationspartner &nbsp; &nbsp;<span class="glyphicon glyphicon-menu-up"></span></button>
    <div class="partner container-fluid">
      Some Content
    </div>
  </div>
</main>
<footer class="container-fluid"></footer>
...