【问题标题】:Bootstrap nav menu does not scroll/affix after jQuery load引导导航菜单在 jQuery 加载后不滚动/附加
【发布时间】:2017-01-10 13:03:44
【问题描述】:

我正在使用jQuery清空一个div,然后将一个php页面加载到清空的div中:

$("#main-container").empty();
$("#main-container").load("blog.php");

除了 Bootstrap 侧滚动导航菜单(包含在 blog.php 中)之外,其他所有功能都可以正常工作,它在合并到单个静态 HTML 页面时会按预期进行附加和滚动,但在使用 JS 进行分离和加载时则不会。

HTML:

<div class="col-md-offset-10 col-md-2">
  <ul class="nav nav-pills nav-stacked" id="navmenu-side" data-spy="affix" data-offset-top="400">
    <h3>Categories</h3>
    <li><a href="#section1">All</a></li>
    <li><a href="#section2">Category 1</a></li>
    <li><a href="#section3">Category 2</a></li>
    <li><a href="#section3">Category 3</a></li>
  </ul>
</div>

CSS:

#navmenu-side.affix {
  position: fixed;
  top: 200px;
  width: 100%;
  z-index: 10;
}
#navmenu-side.affix-bottom {
  position: absolute;
  width: 100%;
}

我认为这可能是 Bootstrap 事件由原始页面/DOM 加载触发但在 jQuery 加载后未触发的结果。使用jQuery的加载方法将Bootstrap侧导航菜单加载到页面后如何滚动/附加?

【问题讨论】:

  • 你能为我们创建一个 jsfiddle 或 bootply 吗?

标签: javascript jquery twitter-bootstrap navbar affix


【解决方案1】:

尝试添加这个

$("#main-container").load("blog.php", function () {
  $('#myAffix').affix('checkPosition');
});

【讨论】:

  • 这会使菜单再次滚动,尽管在我滚动到页面顶部之前它不尊重“数据偏移顶部”,这意味着它会跳转并覆盖上面的内容。我怎样才能提醒它这个限制?干杯。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-03-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多