javascript - 当用户将页面滚动到底部时页脚向上滑动

Question

我在网页底部固定了一个页脚，但我不希望它在用户到达页面底部之前可见，然后我希望它向上滑动。

页脚高度为 200 像素并固定在底部，正文底部有 200 像素的内边距。

CSS:

footer {
    min-height: 200px;
    background-color: #bdf207;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
 }

body {
    padding-bottom: 200px;
}

我正在使用的 jQuery 如下，但它不工作:

$(window).scroll(function() {
    // when user starts scrolling trigger function
    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
    // if the bottom of the page reaches 250px remaining of the document
    if (scrollBottom > 250){
        // slide the footer up
        $('footer').slideUp('slow');
    }
});

Answer 1

我会以不同的方式处理它。我会利用绝对定位并将其隐藏在文档下方，直到您滚动到适当的位置。

$(window).scroll(function() {
  var scrollBottom =
      $(document).height() - $(window).height() - $(window).scrollTop(),
      currentPos = parseInt($('footer').css('bottom'));

  if(currentPos === -200 || currentPos === 0)
    if (scrollBottom < 250){
      $('footer').stop().animate({bottom: 0});
    } else {
      $('footer').stop().animate({bottom: -200});
    }
});

footer {
    min-height: 200px;
    background-color: #bdf207;
    position: fixed;
    left: 0;
    right: 0;
    bottom: -200px;
}

body {
    padding-bottom: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>Footer</footer>