Question

我想（在页面开头）我的导航在屏幕底部。在我们滚动之后，导航将粘贴到页面顶部（带有航点）如果我把我的导航器放在相对它的工作，但固定它不起作用。对不起，我的英语很差，谢谢。

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

Answer 1

这将是我的方法：

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所以我无法链接到它。

导航固定在底部，滚动粘贴后

1 个答案: