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

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;来隐藏元素display: none; 。

在高度为200px且最小高度为200px的元素上调用它不会对元素的高度产生任何影响，然后将display: none;设置为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;
            }
        });
    });