粘性div从页面底部开始-保持顶部

Question

I have a holding page for a website working as desired currently. Some Vegas running background fades and a simple nav bar down the bottom. Currently fixed to the bottom of the page with:

Position: absolute; bottom: 0;

View here: www.gigabang.co

I would like to develop it so that the the sit loads to that page, then the user can scroll down to reveal content. The Footer would scroll with the page to reveal the content and then stick at the top of the page.

I have managed to rudimentarily implement some stickUp jQuery that gets the 'footer' to stick to the top of the page, but Ive had to remove the position: absolute to get it to function.

Test Page

Is there a way to get a div to start stuck to the bottom of the browser window and stick to the top after a scroll? Also ive had to remove the Vegas jQuery code to get the stickUp stuff to work too. Can anyone see why that would be?

Thanks for your help! -m

stickUp Script:

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

Vegas 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-end使用Flex属性。

Answer 2

Do you mean like this?

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

  });  
}

Alternate JS with Animation

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

      });
    }

  });  
}