3

我正在使用 BackboneJS 和 Bootstrap，并且我试图在访问者单击按钮后对某些内容启用滚动监视。

因此，当用户单击该按钮时，将执行以下操作：

$('#frontPageNav').css('display', 'block'); // It was hidden on load
$('#frontPageNav').scrollspy(); // Activate scrollspy, this is where the error happens
$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh'); // I think this is not needed because nothing was invisible before
});
$('#frontPageNav li').on('activate', function () { // This never gets emitted
  alert('activate!');
});

我想被监视的内容是这样放置的：

<div data-spy="scroll" data-target="#frontPageNav">
  <div id="home-top" class="row slide">
  </div>
  <div id="home-how" class="row slide">
  </div>
  <div id="home-join" class="row slide">
  </div>
</div>

页面上没有其他元素具有 data-spy 属性，所以我认为这应该是唯一被监视的内容，但显然不是： On page load I get an error, ，Uncaught TypeError: Cannot read property 'top' of null这意味着 scrollspy 插件正在尝试查找$.position()一个不存在的元素。我在 Chrome 的开发人员工具中打开了异常刹车，未捕获的异常在 bootstrap.js 的第 454 行，&& [[$href.position().top, href]]) || null如果我 hover href，选择器用于我的标记中没有的元素，但我有一个指向哈希的链接。

这是否意味着 scrollspy 插件认为它应该监视所有链接href="#something"并在具有该 ID 的标记元素中查找？为什么不保持对元素的间谍活动data-spy="scroll"？

4

1 回答 1

5

通过将 ScrollSpy 插件附加到特定元素，插件将侦听该元素上的滚动事件。但是，该插件使用目标选项来确定哪些链接有资格激活。除非明确提供目标，否则 ScrollSpy 插件将抓取整个正文以查找与选择器匹配的链接'.nav li > a'。通过提供一个目标，选择器将变为target + ' .nav li > a'，将搜索限制在目标内。

API 通过使用标记支持规范data-target，以及通过在 JavaScript 调用中将其作为选项传递$('#myElement').scrollspy({target: '#myTarget'});。

对如何激活 Twitter Bootstrap Affix 组件的链接？

于 2012-08-30T05:36:51.307 回答