当我滚动到页面末尾时，如何将 div 从页面顶部放到页面底部答案

【问题标题】：How to put a div from the top of my page to the bottom of it when i scroll to the end of the page当我滚动到页面末尾时，如何将 div 从页面顶部放到页面底部
【发布时间】：2016-12-10 01:46:29
【问题描述】：

所以我希望我的问题足够清楚！我的页面顶部有一个 div，当我滚动并点击页面末尾时，我希望该 div 在底部移动，我想你明白了！

如果有人作为想法，我会接受它;）

【问题讨论】：

是的，你试过什么？
没什么，我根本不知道如何实现这一点！也许通过让我的 div 固定位置，然后用一些脚本把它放到底部
当用户滚动到页面底部时是否要显示全屏 div？
这是一个表单组 div，里面有 2 个 col-sm-6 div，我希望所有的东西都放在底部
我认为有可能获得页面的所有高度和滚动顶部位置，使用这两个变量，可以计算滚动顶部百分比，您可以使用此结果来设置您的 div 顶部位置

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

尝试使用scroll 事件和animate() 方法，并使用标志scroll 确保div 只会移动一次：

var scroll = true;

$(document).on('scroll', function(){
    var my_div = $("#my-div");

    if(scroll){
       scroll=false;

       my_div.animate({
          top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
       }, 1000);
    }
})

希望这会给你一个想法。

var scroll = true;

$(document).on('scroll', function(){
  var my_div = $("#my-div");

  if(scroll){
    scroll=false;

    my_div.animate({
      top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
    }, 1000);
  }
})

html, body { height: 500px; }

#my-div { 
  position: absolute;
  top: 0; 
  left: 0;
  width: 90%;
  height: 100px; 
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>

【讨论】：

【解决方案2】：

您可以检测用户何时滚动到页面底部，然后将 top 属性从 0 转换为窗口高度减去该元素的高度。

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    $('div').css({
      top: $(window).height() - $('div').height()
    });
  }
});

CODEPEN

【讨论】：