我在bootstrap页面上看到了左手ScrollSpy示例:
http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy
但他们没有任何示例代码如何获得相同的风格和效果？实现这一目标所需的最小代码是什么,因为我看到的所有JsFiddle示例都没有样式.
我已停止在我的项目中使用scrollspy,因为滚动条仅适用于页面级别,我需要滚动条仅显示在滚动发生的容器上
我已经创建了我的问题,并在这里进行测试:http://jsfiddle.net/aVBUy/7/
问题是,当我点击导航栏项目时,我有一个滚动到元素ID的脚本.当页面处于正确位置时,我正在使用scrollspy来突出显示导航元素.但是,scrollspy仅在它到达浏览器/设备顶部时才更改活动状态.因为我的导航栏是固定的,我需要一个应用于scrollspy的偏移量来偏移51px(导航栏高度).
我已经尝试了一切,但我无法让它发挥作用.请检查我的小提琴,看看你是否能找到我出错的地方,对我这么帮助.
这是我最小化的代码......
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><img src="img/logo.gif" alt="" /></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#welcome" data-scroll="#welcome">Welcome</a></li>
<li><a href="#about" data-scroll="#about">About</a></li>
<li><a href="#route" data-scroll="#route">The Route</a></li>
<li><a href="#bike" data-scroll="#bike">The Bike</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div id="welcome" class="row-fluid">
<div class="span12">
<h3>Welcome</h3>
...
</div>
</div>
<hr />
<div id="about" class="row-fluid">
<div class="span12">
<h3>About the ride</h3>
... …我正在使用Bootstrap 3.我想重新创建与Bootstrap站点上的文档中的侧栏相同的功能.
下面是我的代码,它也在这里:http://bootply.com/82119
两个问题.
data-offset值似乎没有任何效果.我究竟做错了什么？
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group navbar" id="sidebar">
<ul class="nav" id="mynav">
<li><a href="#c1" class="list-group-item">
Content 1
</a>
</li>
<li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
</a>
</li>
<li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
</a>
</li>
<li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
</a>
</li>
<li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0">
<h2 id="c1" class="">Content 1</h2>
At …我正在尝试在Angular 4中实现scrollspy.我在.angular-cli.json文件中导入了jQuery和Bootstrap.js.它没有在控制台中给出任何错误.但是,active类未按li预期应用于元素.
https://v4-alpha.getbootstrap.com/components/scrollspy/
header.component.ts
ngOnInit() {
$(document).ready(() => {
$('body').scrollspy({target: "#myNavbar", offset: 50});
});
}
header.component.html
<div class="navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#PATIENT IDENTIFICATION">Section 1</a></li>
<li><a href="#INITIATION">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
有没有人知道如何使用scrollspy而不使用bootstrap？我正在尝试使用此存储库在我的一个项目中使用它:
https://github.com/sxalexander/jquery-scrollspy
但它只是不做引导程序所做的事情.在李标签未标记为活动:(任何帮助将不胜感激.
我试过这样做:
$('#intel_nav').scrollspy({
//n: $('#nav').offset().top,
onEnter: function (element, position) {
console.log(element);
$("#intel_nav").addClass('moo');
},
onLeave: function (element, position) {
$("#intel_nav").removeClass('out');
}
});
该元素似乎是实际的菜单,所以我不知道如何实际获取我当前悬停的元素的id.
更新: 为了消除一些困惑,我添加了一个小提琴,演示它应该如何工作,但它只是缺少 scrollspy:https://jsfiddle.net/kmdLg7t0/如何添加scrollspyto这个小提琴,以便菜单当我在特定部分时突出显示？
我创建了一个固定的左侧菜单,在浏览器宽度为<992px的平板电脑和移动设备上变成了一个非画布菜单 .当我在浏览器宽度> 992px上选择锚点链接时,它会关闭菜单并导航到锚点链接部分.
自定义JQuery代码: 这是我的自定义jQuery代码,当我点击锚链接时关闭Off-Canvas菜单:
// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
问题:
我决定添加一个bootstrap offscrollspy,它在浏览器宽度大于992px后按预期工作,但是当我将浏览器宽度调整到小于992px时,这会干扰自定义Jquery代码以关闭菜单并导航到锚链接.
这是小提琴:
Bootstrap ScrollSpy导致Off Canvas Menu和JQuery Code出现问题
我的GUESS:我猜这个问题的解决方案是使用jquery或javascript来阻止或删除data-target =".navmenu",当我的屏幕小于<992px时激活.或者,我们可以找到一种方法,只激活scrollspy后> 992px.我目前正试图解决这个问题,但我需要一个真正的jquery专家才能解决这个难题.
先决条件:
JS:
$(document).ready(function () {
toggleOffcanvas($(window).width() <= 992);
});
// simulate modal opening
$('.nav-link').click(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, …javascript jquery scrollspy twitter-bootstrap-3 off-canvas-menu
我试图让Bootstrap的scrollspy在响应式网站上可靠地工作,其中顶部导航栏的高度根据媒体/浏览器的宽度而变化.因此,不是硬编码data-offset属性的偏移量,而是通过Javascript初始化动态设置它,如下所示:
$('body').scrollspy({ offset: 70, target: '#nav' });
对于宽布局(即Bootstrap -lg),它可以正常工作,但对于较窄的布局,似乎存在"累积"偏移.换句话说,它适用于第一部分,但随后需要增加像素来激活以下部分(例如,下一个为90px,第三部分为110px等).
我尝试直接操作scrollspy对象,如下面的答案中所述: 如何在Bootstrap中设置ScrollSpy的偏移量？但无济于事.
有人可以推荐一种在响应式网站中实现scrollspy的规范方法,其中偏移量根据媒体宽度而变化吗？
附加信息:
我刚刚在两个场景中分析了scrollspy对象,结果发现当通过data-属性而不是通过JS 初始化时,偏移列表是不同的.看起来当我通过JS初始化它时,偏移数组会在一些BS响应调整发生之前填充,因此高度不同.在所有响应式内容运行后,如何触发scrollspy的初始化？BS调整布局后是否有钩子/回调？JS是否参与或者是由CSS处理的所有响应式内容？
responsive-design twitter-bootstrap scrollspy twitter-bootstrap-3
我正在尝试使用绝对URL而不是#锚链接使用scrollspy.
例如,我可以通过仅使用来轻松运行scrollspy <a href="#section1"></a>
我希望能够通过使用运行scrollspy <a href="http://myurl.com/#section1"></a>
这样做的原因是,主页上的主要导航是scorllspy,但博客不是主页的一部分.访问博客然后单击主页上的某个链接时,您将被路由到http://myurl.com/blog/#section1而不是主页ID.
我找到了这个解决方案(使用url和hash with bootstrap scrollspy),但无法使其完全正常运行.经过一些调整和大量的正则表达式组合后,我可以将它添加到第一个菜单项的活动类,但它不会刷新.
有什么想让这个工作？我应该使用替代的js库吗？
解决方案感谢特洛伊
jQuery(function($){
// local url of page (minus any hash, but including any potential query string)
var url = location.href.replace(/#.*/,'');
// Find all anchors
$('.nav-main').find('a[href]').each(function(i,a){
var $a = $(a);
var href = $a.attr('href');
// check is anchor href starts with page's URI
if (href.indexOf(url+'#') == 0) {
// remove URI from href
href = href.replace(url,'');
// update anchors HREF with new one …我想在没有引导程序的情况下实现滚动间谍。
我在网上查了很多代码，都是用jQuery实现的。
如何仅使用 React 的强大功能来实现scrollspy？
我在使用 Bootstrap Scrollspy组件时遇到问题。
我正在使用sticky-top导航栏，当单击导航按钮时，它会滚动到正确的元素；
但问题是粘性导航栏覆盖了这个元素。
我尝试data-offset = "50"在 body 标签中使用，但它没有任何影响。
正文标签：
<body data-spy="scroll" data-target="#sectionsNav" data-offset="50">
正文标签CSS：
body {
position: relative;
overflow-y: auto;
}
导航栏：
<nav class="navbar navbar-light bg-light sticky-top">
<div id="sectionsNav">
<ul class="nav nav-pills text-center">
<li class="nav-item">
<a class="nav-link" href="#wihe">What is Home Eats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hiw">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pws">Problems we Solve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#jhen">Join Now!</a>
</li>
</ul>
</div>
</nav>
它是如何工作的：
..
<div id="hiw" class="container"> …scrollspy ×10
jquery ×4
javascript ×2
angular ×1
bootstrap-4 ×1
css ×1
href ×1
html ×1
jsfiddle ×1
reactjs ×1