个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想将 scrollspy 添加到我的分页中，但它不起作用，我不知道为什么!
HTML:
<body data-spy="scroll" data-target=".my-pager" data-offset="100">
<div class="container">
<nav aria-label="Page navigation example" class="my-pager">
<ul class="pagination">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="content">
<div id="section1">
<h1>Section 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="section3">
<h1>Section 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</body>
CSS:
.content {
width: 400px;
margin: 50px auto;
padding: 20px;
background: white;
}
p {
font: 15px/2 Georgia, Serif;
margin: 0 0 30px 0;
text-indent: 40px;
}
.pagination {
position: fixed;
}
有什么想法吗？
最佳答案
检查您的链接。
在任何 css、js 或 bootstrap 链接之前，首先将 jquery 链接到您的元素。然后包括 bootstrap css/js，最后是你的默认文件。
确保你也有相同的版本。
关于css - Bootstrap Scrollspy + 分页 - 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42469923/
25
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
我是一名优秀的程序员,十分优秀！