0

I would like (on start of the page) having my nav on the bottom on screen. After that when we scroll the nav will be sticky to the top of the page (with waypoints) If I put my nav in relative it's working, but with fixed it's doesn't work. Sorry for my poor english, thanks.

  <style>
  #social-float {
    position: fixed;
    bottom: 0px;
    width: 55px;
  }
  #footer { height: 235em; background: #888; }
  #background {
    background: url(images/background.jpg) no-repeat top center fixed; 
    background-size: 100% 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  }
</style>
<link rel="stylesheet" href="css/css.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-sticky.min.js"></script>

  <script>function checkOffset() {
      var a=$(document).scrollTop()+window.innerHeight;
  var b=$('#footer').offset().top;
  if (a<b) {
    $('#social-float').css('bottom', '10px');
  } else {
    $('#social-float').css('bottom', (10+(a-b))+'px');
  }
}
  $('.my-sticky-element').waypoint('sticky');
  </script>

<div id="background" style="height:1000px">
  long content sample
</div>
<div id="social-float" class="my-sticky-element">
    <ul id="nav">
      <li><a href="#a">One</a></li>
      <li><a href="#b">two</a></li>
      <li><a href="#c">three</a></li>
    </ul>
</div>
<div id="footer">
  footer sample
</div>
4

1 回答 1

0

这将是我的方法：

css

#social-flat {
  position:fixed;
  bottom:0;
  width:100%;
}

#social-flat.top {
  bottom:inherit;
  top:0;
}

JS：

jQuery.fn.extend({
  moveFooterNav: function(){
    var that = $(this);
    var fixNav = $("#social-flat");
    var navPos = fixNav.offset;
    that.on({
       scroll:function(){
         var winPos = window.pageYOffset;
         if(winPos > navPos.top){
           fixNav.addClass("top");
         } else {
           fixNav.removeClass("top");
         }
       }
    });
  }
});

$(window).moveFooterNav();

抱歉，公司阻止了 jsFiddle，所以我无法链接到它。

于 2013-09-06T17:44:19.960 回答