1

我已经为此工作了一周左右，我有一个可行但不是很好的解决方案。

我有一个隐藏的页脚，上面有一个类似标签的按钮。单击此按钮时，我的页脚将向上滑动并将该按钮也向上推。

我的问题来自我无法将按钮放在页脚内。由于页脚在单击之前是隐藏的，因此该按钮也将被隐藏。

我尝试的一种方法不是隐藏页脚，而是在其上放置一个负数bottom以隐藏它直到单击。这工作得很好，但是一旦点击它，你就可以向下滚动，之后它就再也没有隐藏了。

然后我决定我必须隐藏/显示它，但这是按钮出现问题的地方。由于页脚是隐藏的，我无法将按钮放在页脚内。由于按钮位于页脚之外，我尝试对其进行动画处理，但它不会同时进行动画处理，这很奇怪。

我所做的最终解决方案是使用 css3 缓动，但由于它的未冲洗程度，它仍然不完美甚至不可用。

我试图让两者都在确切的时间动画，同时看起来好像它们是一个对象。

这是我的HTML

<span class="fTab">Open Footer</span>
<footer>
</footer>

这是我的CSS

footer {
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: rgba(0, 0, 0, 0.69);
}

.fTab {
  width: 15%;
  height: 4em;
  position: absolute;
  bottom: 0;
  left: 2em;
  display: block;
  background: rgba(0, 0, 0, 0.69);
  color: #c1c1c1;
  line-height: 4em;
  text-align: center;
  font-size: 1.2em;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
}

.fTab.current {
  bottom: 20%;
}

这是我的jQuery

function footer() {
  var footerH = $('footer');
  var fH = footerH.height();

  $('.fTab').on('click', function() {
      $(this).toggleClass('current');
      $('footer').slideToggle(500);
  });
}

footer();

这是JSFIDDLE，这是我尝试的另一个选项，JSFIDDLE 2

如果需要，这里是LIVE SITE 。

如果您需要其他任何东西，请告诉我，我感谢您的任何帮助！

4

1 回答 1

8

我已经为你构建了一个简单的小提琴，只是效果：http: //jsfiddle.net/wa989/

诀窍是转换bottom按钮的值和height页脚的值。无需使用 jQuery 进行滑动，因为您可以对按钮的位置和页脚的高度使用 CSS3 过渡。

不过，您可能希望使用 jQuery 将按钮的文本切换为“隐藏页脚”。

于 2013-11-07T17:32:30.217 回答