个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试制作一个粘性的 self 突出侧边栏来工作，并且花了很长时间才弄清楚我错过了什么。内容包括 data-spy="scroll"data-target=".sidenav"属性，但只有 sidenav 中的最后一个项目突出显示，并且滚动时没有任何 sidenav 项目突出显示。我有一个 jsfiddle 示例:
(调整结果 Pane 的宽度，使 .sidenav float 到左侧)
遵循文档 http://twitter.github.com/bootstrap/javascript.html#scrollspy
$('.sidenav') 已被 affix() 编辑。 div.sidenav 有一个 ul w/class="nav nav-tabs nav-stacked"。有一个内容 div w/data-spy="scroll"data-target=".sidenav"，但是在页面加载时，导航中的最后一项会突出显示，并且滚动时没有任何更新。我错过了什么？
html:
<div class="container">
<div class="row">
<div class="span2 sidenav-parent">
<div class="sidenav">
<ul class="nav nav-tabs nav-stacked">
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d">d</a></li>
<li><a href="#e">e</a></li>
</ul>
</div>
</div>
<div class="span10" id="gimmelove" data-spy="scroll" data-target=".sidenav">
<h4 id="a">a</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
<h4 id="b">b</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
<h4 id="c">c</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
<h4 id="d">d</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
<h4 id="e">e</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
CSS:
body { margin-top: 20px; }
#gimmelove { background-color:#f3f3f3; }
.sidenav .active a { font-weight:600; background-color:#f3f3f3; }
js:
$('.sidenav').affix();
最佳答案
我自己也遇到过类似的问题。首先，将 data-spy="scroll"和 data-target=".sidenav"属性添加到 body 标记中。当在 DOM 中添加得更深入时，它无法正常工作，导致 nav 元素位于添加属性的位置之外。
例如
<body data-spy="scroll" data-target=".sidenav" >
另一个需要注意的事项是，当导航切换到固定位置时，它会更改 a、b、c、d 部分距顶部的偏移量，因此之前计算的各部分的位置不再准确.
以下是添加到 body 标记的属性的示例:http://jsfiddle.net/b8JkE/50/
关于twitter-bootstrap - bootstrap scrollspy sidenav 不工作 - 最后一项选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13179119/
28
4
0
我正在制作一个单页网站，我正在尝试让导航栏链接反射(reflect)您所在页面的哪个部分。我试过通过 HTML 使用它但没有成功。我在包含不同部分的容器上有这段代码 并且正文设置为相对的。 因为那行
我正在使用 Scrollspy 的 Jquery 独立实现。我在这里有一个关于我的问题的 jsfiddle 示例:http://jsfiddle.net/2acyu/66/ 当页面向下滚动到 3 个部
我正在制作作品集，但我在使用 Bootstrap 4 时遇到了 2 个问题: 将导航栏链接放在右侧 还有 Bootstrap Scrollspy。 有人可以帮我解决以上两个问题吗？ 我已经尝试过来自
我已经在我的应用程序中实现了 Scrollspy。因为我在我的应用程序中使用了 knockout 框架，用户可以在一个部分中添加最多 15 行。所以如果他们添加 15 行，滚动 spy 高度就会受到影
您好，我在使用 Bootstrap Scrollspy 时遇到了两个问题 1- 滚动时，事件类不会在我想要加上的位置突出显示 section4 由于某些奇怪的原因没有激活，见此处: Scrollspy
我似乎无法让 scrollspy 处理隐藏元素。 我将 data-spy="scroll"和 data-target=".classOfNavWrapper"放在 body 上，它并没有像文档暗示的那
如您在此示例中所见，Bootstrap Scrollspy 会跳过导航，但实际上并没有像预期的那样工作。错误的元素是获取 .active 类。 $('.spycontent').scrollspy({
我在我的网站上使用 materializecss scrollspy 组件，scrollspy 链接有效。但唯一困扰我的是 scrollspy 的目录没有跟随滚动位置。
我需要 JQuery 方面的帮助，我相信这可能是显而易见的解决方案，但我不知道如何去做。关于滚动页面上的导航栏，我希望导航栏上的链接之一转到外部页面(而不是页面中的某个部分)。它会这样做，但它会弄乱滚
我试图在我的网站中添加 scrollspy 东西，但目前还没有用。当我在那个部分时，它不会突出显示导航栏中的链接，这是 scrollspy 所做的，所以我无法找出问题所在。我已经粘贴了代码并帮助我弄清
我一直在努力建立我的网站，我真的很想在我的页面上有一些字体很棒的字形，当我滚动时它们会淡入。问题是我不太了解 Spyscroll 或如何使用它。 这是我的代码，也许任何人都可以帮助我。 #sectio
Scrollspy 同时突出显示两个目标，这不是我想要的。我希望它只突出显示一个。它确实突出显示了一个，但是当在两个元素之间滚动时它突出显示了两个。 CSHTML var guid = Guid.Ne
scrollspy 上的事件部分未在导航栏上更新。我不确定我是否缺少脚本或代码中是否有错误。 脚本 /* Navbar Spyscroll */ $('body').scrollspy
scrollspy 效果正常，但突然停止工作。我的意思是当 href 链接像这样 href="#id"时，在滚动单页站点时识别菜单的事件元素。但是当 href 像“/home#id”一样给出时它停止工
你好网络爱好者，我希望你能帮我解决一个问题。 我正在使用 bootstrap 创建一个网站，该网站使用 scrollspy 通过导航栏导航到页面的某些部分。我可以让 URL 不显示的唯一方法 "#se
您好，当我启用移动菜单折叠时，它会停止 scrollspy 的工作。 它们都可以单独工作但不能一起工作，这是 bootstrap 的限制吗？ 这是我的导航栏代码:
我一直在使用来自 startbootstrap.com 的名为“创意”的模板，如图所示 here . 因为最后一节太短，当它到达页面底部时，它永远不会被 scrollspy 突出显示。但是，正如您在
首先，如果我重复其他地方发布的内容，我深表歉意。我一直在研究其他人为他们的问题找到的解决方案，并且我已经实现了(或者我认为)他们发现的东西，但我正在开发的网站仍然没有达到预期的效果。 所以，我正在处理
我有一个复选框，当选中该特定复选框时，它会在上面显示一些文本: $('#pck-94').click(function() { $('#pico-info').toggle(this.ch
fiddle :http://jsfiddle.net/bVLBL/ “事件”类未应用于正确的链接。有什么解决办法吗？ HTML: Introdu
我是一名优秀的程序员,十分优秀！