Question

我有一个固定的底部栏，可以滚动滚动折叠，现在我将其折叠起来：

$(".Bar").animate({
  height: 0
}, 700);

$(".Bar").animate({
  height: originalBuyBarHeight
}, 700);

所以我改变了他的身高，看起来不太好。我如何简单地将其滑到屏幕外（及其所有内容），然后将其滑回到原始位置？

CSS：

.Bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 12vh;
}

Answer 1

您可以更改最低值

$(".Bar").animate({
          bottom: 0
      }, 700);



$(".Bar").animate({
          bottom: '-12vh'
      }, 700);

Answer 2

使用一个类，并通过CSS实现此效果：

.bar {
    position: relative;
    transform: translateY(0);
    transition: transform .7s ease-in-out; /* you can change the time and easing */
}

.bar.moveOffscreen {
    transform: translateY(110%);
}

并使用JS而不是原始代码进行应用：

/* code to hide it */
$(".bar").addClass('moveOffscreen');
/* code to reveal it */
$(".bar").removeClass('moveOffscreen');

使用香草JS实现此功能，而无需使用JQuery：

/* code to hide it */
document.getElementById(".bar").classList.add('moveOffscreen');
/* code to reveal it */
document.getElementById(".bar").classList.remove('moveOffscreen');

PS：在班级名称的开头不要使用大写字母=>将 .Bar 更改为 .bar

用Java折叠底部栏

2 个答案: