Twitter Bootstrap - 动态更新Affix Data-Offset属性

时间:2012-10-26 01:15:41

标签: javascript jquery twitter-bootstrap sticky-footer

我正在页面上的某个区域使用“粘性页脚”技术,该区域还有一个使用词缀的导航栏。问题是数据偏移属性需要根据粘性页脚的位置进行更新 - 因此它不能进行硬编码。

如何获取粘性页脚所在位置的值,并将该值传递给data-offset属性,以便知道何时粘贴自己?

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:2)

我也在修改导航栏,取决于无法硬编码到css的位置。不是因为粘性页脚,而是导航栏上方的空间(未修复时)是动态的,但我认为解决方案类似。

我使用JavaScript修复/取消修复,方法是设置/取消设置正确的动态类,具体取决于视口中是否有某些DOM元素可见。该计划如下:

  • 导航栏的样式为position: absolute,包含它的空间具有导航栏的静态高度,因此修复时下面的内容位置没有变化,
  • 如果上面的元素不可见,
  • 绑定侦测间谍的函数并修复导航栏,
  • 通过比较其位置的底部与视口位置的顶部来检查元素是否可见
  • 通过在每次用户滚动或更改窗口大小时添加/删除引导类来修复/取消修复。

Opa framework中的代码(转换为JS + jQuery应该是直截了当的,因为Opa的DOM库只是简单地绑定到jQuery):

// id of the element above the navbar, and the navbar
logobar_id = "logo-bar";
navbar_id = "main-menu";
// hardcoded height of the navbar
navbar_height_px = 30;

client function distance() {
  dom = #{logobar_id};

  // hardcoded height of the navbar
  win = Dom.select_window();

  // position of the top of the viewport
  scroll_visible = Dom.get_scroll_top(win);

  // return the distance between of bottom of element above the navbar and the top of 
  dom_bottom = Dom.get_offset(dom).y_px + Dom.get_height(dom);
  dom_bottom - scroll_visible;
}

dom = #{navbar_id};

private client function fixation() {
  if (distance() <= 0) {
    // TODO: remember if subnav is fixed, dont fix if fixed
    Dom.add_class(dom, "navbar-fixed-top");
    Dom.remove_class(dom, "container");
  } else {
    // TODO: remember if subnav is fixed, dont unfix if unfixed
    Dom.remove_class(dom, "navbar-fixed-top");
    Dom.add_class(dom, "container");
    void;
  }
}

// (un)fix when scroll
private client function onscroll(_) {
  fixation();
}

// bind the `onscroll` handler for subnav when it is loaded
private client function onready(_) {
  _ = Dom.bind(Dom.select_window(), {scroll}, onscroll);
  fixation();
}

导航栏上方的DOM元素和导航栏本身:

<div class="container" id=#{logobar_id}>
  My logo with dynamic content
</div>
<div class="container" style="height: {navbar_height_px}px; position: relative; top: 0px">
  <div style="position: absolute; top: 0px">
    <div class="navbar container" id=#{navbar_id} onready={onready}>
      ...
    </div>
  </div>
</div>