Javascript 粘性div从页面底部开始-粘到顶部

我有一个网站的等待页面，目前正在按需要工作。一些维加斯跑步的背景会淡出，底部有一个简单的导航条。当前固定在页面底部，带有：

Position: absolute; bottom: 0;

在此处查看：

我想开发它，以便sit加载到该页面，然后用户可以向下滚动显示内容。页脚会随着页面滚动显示内容，然后粘在页面顶部

我已经初步实现了一些stickUp jQuery，使“页脚”粘贴到页面顶部，但我不得不删除位置：绝对以使其正常工作

有没有办法让一个div开始粘在浏览器窗口的底部，然后在滚动之后粘到顶部？另外，我还必须删除Vegas jQuery代码才能让stickUp功能正常工作。有人知道为什么会这样吗

谢谢你的帮助！ -m

粘贴脚本：

<script src="gigabang/stickUp.js"></script>
<script type="text/javascript">
          //initiating jQuery
          jQuery(function($) {
            $(document).ready( function() {
              //enabling stickUp on the 'footer' class
              $('.footer').stickUp();
            });
          });

        </script>

//启动jQuery
jQuery（函数（$）{
$（文档）.ready（函数（）{
//在“页脚”类上启用粘贴
$（'.footer'）.stickUp（）；
});
});

维加斯剧本：

<!--<script type="text/javascript">
$(function() {
$.vegas('slideshow', {
delay: 8000,
backgrounds:[
{ src:'gigabang/WEBBG2.jpg', fade:1000 },
{ src:'gigabang/WEBBG5b.jpg', fade:1000 },
{ src:'gigabang/WEBBG6.jpg', fade:1000 },
{ src:'gigabang/WEBBG1.jpg', fade:1000 } ]
});$.vegas('overlay', {
src:'gigabang/vegas/overlays/13.png'
});
});
</script>

---

您可以在css3中将Flex属性与align content:Flex end一起使用。
您的意思是这样的吗


HTML
JS
用动画替换JS
哦！几乎。但我更希望它能随着内容向上滚动页面，而不仅仅是从底部到顶部切换。最初，使用绝对位置定位元素会将其从页面流中移除，从而有效地防止其滚动到顶部。您必须设置动画或将元素从页面底部过渡到顶部。我还添加了一个动画示例。为您迄今为止的帮助干杯。。。据我所知，如果不使用绝对定位，就无法在浏览器底部定位div…？明白了！不完全是我打算怎么做的，但实际上效果非常好，我想。。。
<h1>Footer Scroll</h1>
<footer id="footer">Footer</footer>

body {
  font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

h1 {
  font-family: "Segoe UI Light", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  color: #999;
  font-weight: normal;
  margin: 0;
}

footer {
  background: #008aca;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.fixed {
  position: fixed;
  top: 0;
  bottom: auto;
}

$(document).on("ready", function(){

  sortTheFooterOut();

});

function sortTheFooterOut() {

  footer = $("#footer");

  $(window).on("scroll", function(){

    if ($(window).scrollTop() > 0) {
      footer.addClass("fixed");
    } else {
      footer.removeClass("fixed");
    }

  });  
}

$(document).on("ready", function(){

  sortTheFooterOut();

});

function sortTheFooterOut() {

  footer = $("#footer");

  $(window).on("scroll", function(){

    if ($(window).scrollTop() > 0) {

      if (!footer.hasClass("fixed")) {
      footer.fadeOut(250,function(){

        footer.addClass("fixed").fadeIn(250);

      });
      }
    } else {
      footer.fadeOut(250,function(){

        footer.removeClass("fixed").fadeIn(250);

      });
    }

  });  
}