Question

我一直在尝试创建一个部分粘性的页脚。我已经设法让它“按照预期”工作。但我想我可能已经过度复杂了这个问题，而且我在知道出了什么问题时遇到了问题。

我的页脚分为两部分。 Part1始终作为粘性页脚显示，part2仅在您滚动到文档底部时显示，或者如果您切换它的可见性。

目前正在这样做，但还有一点。

我如何让事情发生是：

在滚动事件中，我将从页脚和主div的填充中删除display:fixed。
在点击事件中，我正在为bottom:value设置动画以切换页脚。

触发器重叠时会出现问题。因此，如果您滚动到底部，part2会显示，但您仍然可以切换页脚。向后滚动时，您会看到所有css都试图重新到位的抖动。

基本上，如果你上下滚动，这一切都很好（除了页脚和内容之间的一点空间，但不要太担心）。如果你不在页面底部并切换页脚，那么一切都很好。

你们怎么去摧毁那个抖动？
关于如何用更少的代码做同样的事情的任何想法也赞赏，但不是主要问题，我认为xD

HTML

<div class="content">
    <div class="innerContent">
        <!-- ADD CONTENT HERE OR SET THE HEIGHT -->
    </div>
    <div class="footerContainer">
        <div class="footerShow"></div>
        <div class="footer"></div>
    </div>
</div>

CSS

.content {
    width:600px;
    margin:0 auto;
    background:#ccc;
}
.innerContent {
    background:rgba(255, 255, 255, 0.7);
}
.footerContainer {
    width:600px;
    position:fixed;
    background:blue;
}
.showFooterContainer {
    position:inherit;
    bottom:none;
}
.footerShow {
    width:600px;
    height:50px;
    background:rgba(255, 255, 0, 1);
}
.footer {
    width:600px;
    height:250px;
    background:orange;
}

JQUERY

  $('.content').css('padding-bottom', ($('.footerContainer').height() + 'px'));
  $('.footerContainer').css('bottom', ('-' + $('.footer').height() + 'px'));

  $(window).scroll(function() {
      var scrollH = $(window).scrollTop(),
          windowH = $(window).height(),
          documentH = $(document).height(),
          footerH = $('.footer').height(),
          footCont = $('.footerContainer'),
          footContH = footCont.height(),
          footShowH = $('.footerShow').height(),
          desiredH = footShowH - footContH + 'px';

    if (footCont.css('bottom') == '0px') {
      footCont.animate({
        bottom: desiredH},
        600
      );
    }
    if ( scrollH < (documentH - windowH - footerH) ) {
        footCont.removeClass('showFooterContainer');
        $('.content').css('padding-bottom', footContH + 'px');
    } else {
        footCont.addClass('showFooterContainer');
        $('.content').css('padding-bottom', '0px');
    }
  });

  $('.footerShow').click(function(){
    var footCont = $('.footerContainer'),
        footContH = footCont.height(),
        footShowH = $('.footerShow').height(),
        desiredH = footShowH - footContH + 'px';

    if (footCont.css('bottom') == desiredH) {
      footCont.animate({
        bottom:0},
        1200
      );
    }
    if (footCont.css('bottom') == '0px') {
      footCont.animate({
        bottom: desiredH},
        1200
      );
    }
  });

JSBIN

PS - 我知道我不应该在所有地方声明变量，但我仍然在努力寻找范围。

Answer 1

我做一些事情，比如使用布尔变量来跟踪它所处的状态，如果页面滚动到底部，则禁用click事件。您也可以通过使用变量更改来实现此目的，但这种方式很简单，只需要并添加if语句并切换布尔值

var isAtBottom = false; // At top
...
    if (scrollH < (documentH - windowH - footerH)) {
        isAtBottom = true;
        ...
    else {
        isAtBottom = false;
        ...
...
$('.footerShow').click(function () {
    if (!isAtBottom) {
       ... Your code ...

Demo

部分粘性的页脚

1 个答案: