Question

我有一个简单的单页网站，内置在Bootstrap中，里面有一个浮动侧边栏。除了某些屏幕尺寸外，所有东西都能正常工作，侧边栏会在页面底部进入底部和页脚。一旦它到达页面底部的某个部分，我如何让它停止？有抵消？

这是我的JS文件：

$(document).ready(function() {

  /* activate sidebar */
  $('#sidebar').affix({
    offset: {
      top: 400
    }
  });

  /* activate scrollspy menu */
  var $body = $(document.body);
  var navHeight = $('.navbar').outerHeight(true) + 10;

  $body.scrollspy({
    target: '#leftCol',
    offset: navHeight
  });

  /* smooth scrolling sections */
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 50
        }, 1000);
        return false;
      }
    }
  });

});

Here's网站。

Answer 1

使用词缀offset.bottom。它应该设置为页脚的高度以及侧边栏和页脚之间的一些额外填充。

＆＃13;

1.5708

＆＃13;

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').outerHeight() + 60;
$('#account-overview-container').affix({
  offset: {
    top: headerHeight,
    bottom: footerHeight
  }
}).on('affix.bs.affix', function() { // before affix
  $(this).css({
    /*'top': headerHeight,*/ // for fixed height
    'width': $(this).outerWidth() // variable widths
  });
});

＆＃13;

body {
  position: relative;
}
header,
footer {
  background: #ccc;
  padding: 40px 0;
  text-align: center;
}
header {
  margin-bottom: 10px;
}
#account-overview-container.affix {
  position: fixed;
  top: 10px
}
.affix-top {
  position: static;
}
.affix-bottom {
  position: absolute;
  bottom: auto !important;
}
footer {
  padding: 10px 0;
}
footer h1 {
  margin-top: 0;
}

＆＃13;

View Example on Bootply

浮动侧边栏进入页脚

1 个答案: