javascript - 具有自定义JS和CSS重叠HTML元素/定位不正确的Bootstrap缀

http://www.bestcastleintown.co.uk/

在以下网站上，我使用的Bootstrap词缀组件应用于.bcit-sidebar类的div，但是遇到了问题。

我正在尝试使用媒体查询中的类动态定位.bcit-sidebar。当用户滚动top: 80px;属性时，请确保侧边栏跟随用户。

@media (min-width: 992px) {
  .bcit-sidebar.affix {
    position: fixed;
    top: 80px;
  }
  .bcit-sidebar.affix-bottom {
    position: absolute;
  }
}

我已应用以下脚本来确保.bcit-sidebar的位置正确：

setTimeout(function () {
  var $sideBar = $('.bcit-sidebar')

  $sideBar.affix({
    offset: {
      top: function () {
        var offsetTop      = $sideBar.offset().top
        var sideBarMargin  = parseInt($sideBar.children(0).css('margin-top'), 10)
        var navOuterHeight = $('.bcit-nav').height()

        return (this.top = offsetTop - navOuterHeight - sideBarMargin)
      }
    , bottom: function () {
        return (this.bottom = $('.bcit-footer').outerHeight(true))
      }
    }
  })
}, 100)

但是，如果用户开始滚动，则侧边栏会与称为.bcit-heading的橙色页面标题重叠-我不想发生这种情况。我尝试将在top: 80px;上设置的.bcit-sidebar.affix的值增加到top: 180px;，这消除了此处显示的问题：

 

但这反过来又引入了一个新问题-边栏不再与.page-headers的相应高度对齐。这些元素应该水平对齐，但是可能无法实现边栏不与橙色标题重叠而仍然与页面标题水平对齐。关于如何通过修改CSS / JavaScript解决此问题的任何想法？

我想匹配Bootstrap文档上的词缀行为（他们似乎已经以某种方式实现了）-http://getbootstrap.com/javascript/#affix

最佳答案

一种选择是覆盖这样的引导行为...

.bcit-sidebar {
  position: absolute !important;
  top: 0 !important;
}

不太好，但似乎可行。我建议添加一个额外的类，以确保您在其他地方不会出现意外行为。例如添加一个类禁用滚动...

.bcit-sidebar.disable-scrolling {
  position: absolute !important;
  top: 0 !important;
}

关于javascript - 具有自定义JS和CSS重叠HTML元素/定位不正确的Bootstrap缀，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20809677/