0

（ページの開始時に）画面の下部にナビゲーションを配置したいと思います。その後、スクロールすると、ナビゲーションはページの上部に固定されます (ウェイポイントを使用)。ナビゲーションを相対的に配置すると機能しますが、固定では機能しません。下手な英語でごめんなさい、ありがとう。

  <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 に答える