粘滞的div从页面底部开始 - 坚持到顶部

Question

我目前正在按照目标运行网站。一些拉斯维加斯运行背景淡化和底部的简单导航栏。目前已固定在页面底部：

Position: absolute; bottom: 0;

查看此处：www.gigabang.co

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

我已经设法初步实现了一些stickUp jQuery，它将“页脚”粘在页面顶部，但我不得不删除位置：绝对让它运行起来。

Test Page

有没有办法让div开始卡在浏览器窗口的底部并在滚动后粘到顶部？我也不得不删除Vegas jQuery代码以使stickUp的东西也工作。谁能明白为什么会这样呢？

感谢您的帮助！ -m

stickUp脚本：

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

拉斯维加斯剧本：

<!--<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>

Answer 1

您可以在css3中使用带有align-content的Flex属性：flex-end。

Answer 2

你的意思是这样吗？

http://codepen.io/chrissp26/pen/xEAqC

HTML

<h1>Footer Scroll</h1>
<footer id="footer">Footer</footer>

CSS

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

JS

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

  sortTheFooterOut();

});

function sortTheFooterOut() {

  footer = $("#footer");

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

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

  });  
}

替代JS与动画

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

      });
    }

  });  
}