javascript - 使用 Sticky-kit(jQuery 插件)重叠元素，因为导航栏会自动填充窗口

Question

我想实现一个首先粘在页面底部的导航栏。无论窗口的高度是多少，它都会粘在底部 - 然后我希望它在滚动时粘在顶部。

我可以通过 jQuery 库 Sticky-Kit 实现这一点 http://leafo.net/sticky-kit/ .但是，我的所有其他元素都被导航栏重叠了。我已经更改了我的其他元素的 z-index，它可以工作，但现在导航栏重叠了。同样的问题，不同的元素。另外，它看起来不太好，因为我的内容看起来像在导航栏上而不是在导航栏下面。

jsfiddle 上的代码将帮助您了解我正在努力实现的目标: http://jsfiddle.net/u6aNX/

在上面的 jsfiddle 链接中，它没有完全复制我的元素，但它确实复制了问题。导航栏高度增加允许其他元素重叠。虽然在我的元素中它确实显示它增加了但是当我检查 Chrome 开发工具时，我可以看到它的高度与窗口相同。

额外信息:

• 我正在使用 Bootstrap。 .navbar 来自 Bootstrap

代码:

HTML:

  <div class="navbar navbar-bottom" id="sticker">
      <div class="container">
        <a class="brand" href="https://twitter.com/duaneadam" id="duane-brand">@duaneadam</a>
          <ul class="over-nav nav">
            <li>Home</li>
            <li>About</li>
          </ul>
      </div> <!-- /container -->
</div> <!-- /navbar /navbar-bottom -->

  <div>
      <h2>Hello World!</h2>
      <p>
          Lorem ipsums here to achieve scrolling. Check jsfiddle link
      </p>
  </div>

CSS:(自定义，覆盖 Bootstrap)

    .navbar-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0px;
}
.navbar {
    background-color: #ccff22;
}

JavaScript/jQuery:

/*
 Sticky-kit v1.0.1 | WTFPL | Leaf Corcoran 2013 | http://leafo.net
*/
(function(){var g,t;g=this.jQuery;t=g(window);g.fn.stick_in_parent=function(d){var u,k,e,r,B,h,C;null==d&&(d={});r=d.sticky_class;u=d.inner_scrolling;e=d.parent;k=d.offset_top;null==k&&(k=0);null==e&&(e=void 0);null==u&&(u=!0);null==r&&(r="is_stuck");B=function(a,d,h,v,y,l){var p,s,m,w,b,f,z,A,q,x;f=a.parent();null!=e&&(f=f.closest(e));if(!f.length)throw"failed to find stick parent";z=function(){var c,b;c=parseInt(f.css("border-top-width"),10);b=parseInt(f.css("padding-top"),10);d=parseInt(f.css("padding-bottom"),
10);h=f.offset().top+c+b;v=f.height();c=a.is(".is_stuck")?q:a;y=c.offset().top-parseInt(c.css("margin-top"),10)-k;return l=c.outerHeight(!0)};z();if(l!==v)return m=a.css("float"),q=g("<div />").css({width:a.outerWidth(!0),height:l,display:a.css("display"),"vertical-align":a.css("vertical-align"),float:m}),p=s=!1,w=void 0,b=k,A=!1,x=function(){var c,g,n,e;n=t.scrollTop();null!=w&&(g=n-w);w=n;s?(e=n+l+b>v+h,p&&!e&&(p=!1,a.css({position:"fixed",bottom:"",top:b}).trigger("sticky_kit:unbottom")),n<y&&
(s=!1,b=k,"left"!==m&&"right"!==m||a.insertAfter(q),q.detach(),c={position:""},A&&(c.width=""),a.css(c).removeClass(r).trigger("sticky_kit:unstick")),u&&(c=t.height(),l>c&&!p&&(b-=g,b=Math.max(c-l,b),b=Math.min(k,b),a.css({top:b+"px"})))):n>y&&(s=!0,c={position:"fixed",top:b},"none"===m&&"block"===a.css("display")&&(c.width=a.width()+"px",A=!0),a.css(c).addClass(r).after(q),"left"!==m&&"right"!==m||q.append(a),a.trigger("sticky_kit:stick"));if(s&&(null==e&&(e=n+l+b>v+h),!p&&e))return p=!0,"static"===
f.css("position")&&f.css({position:"relative"}),a.css({position:"absolute",bottom:d,top:""}).trigger("sticky_kit:bottom")},t.on("scroll",x),setTimeout(x,0),g(document.body).on("sticky_kit:recalc",function(){z();return x()})};h=0;for(C=this.length;h<C;h++)d=this[h],B(g(d));return this}}).call(this);

$(document).ready(function() {
    $("#sticker").stick_in_parent();
});

Answer 1

您的问题是 position:absolute 和 bottom:0，在导航卡在顶部后(粘性工具包添加了 style="top:0")并且它被拉伸(stretch)到页面底部。

只需添加这个函数:

  $("#sticker").stick_in_parent()

  .on("sticky_kit:stick", function(e) {

      $(".navbar").removeClass("navbar-bottom");

  })

当元素“有粘性”时它会做一些事情

与那个相反的是:

 .on("sticky_kit:unstick", function(e) {

    //do something when "not sticky"

  });

http://jsfiddle.net/u6aNX/2/

如果你想让你的导航栏在你向上滚动时回到“onload”位置

.on("sticky_kit:unstick", function(e) {

   var top_bar = document.getElementById ("sticker");

   top_bar.style.top = "";

   $(".navbar").addClass("navbar-bottom");

});

http://jsfiddle.net/u6aNX/3/