Question

我目前正在制作一个包含三个部分的网站：

包含一些文本和背景图片的div
用于切换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>

animate（）上移容器，但内容不可滚动

0 个答案: