Question

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

页脚高度为200px，固定在底部，底部有一个200px的填充。

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>

Answer 2

slideUp()函数通过将元素的高度降低为0或min-height设置为的任何值来隐藏元素，然后设置display: none;。

在高度为200px，最小高度为200px的元素上调用它将对元素高度无效，然后设置display: none;

Answer 3

.footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 1rem;

  background-color: #efefef;

  text-align: center;

}

然后使用jQuery向上滑动

您可以参考以下链接获取帮助

http://jsfiddle.net/nathanbweb/zMsYq/`

jQuery(function($) {

        var slide = false;

        var height = $('#footer_content').height();

        $('#footer_button').click(function() {

            var docHeight = $(document).height();

            var windowHeight = $(window).height();

            var scrollPos = docHeight - windowHeight + height;

            $('#footer_content').animate({ height: "toggle"}, 1000);

            if(slide == false) {

                if($.browser.opera) {

                    $('html').animate({scrollTop: scrollPos+'px'}, 1000);

                } else {

                    $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
                }

                slide = true;
            } else {
                slide = false;
            }
        });
    });

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

3 个答案: