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

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

页脚高度为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'); 
    } 
});

来源

2016-01-13 njpatten

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

称它是在具有200像素一个最小高度不会做任何事情的元素高度方向上的高度为200px的元素，然后设置display: none;

来源

2016-01-13 15:11:19 spaceman

.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; 
      } 
     }); 
    });

来源

2016-01-13 15:31:00

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

$(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>

来源

2016-01-13 16:44:29

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

回答

相关问题