scrollspy 相关问题

ScrollSpy可能会引用MooTools插件或类似的jQuery插件，例如Bootstrap中常用的插件。脚本侦听页面滚动并根据用户滚动的位置触发事件。

Scrollspy 活动不适用于 Bootsrap 5

我需要帮助。我使用了 Bootstrap 示例中的代码，但它不起作用。我将数据目标放在 Javascript 上，并将数据目标放在 body 上。该代码是 bootstrap-5 rollspy 的完整副本，但是......

html bootstrap-5 scrollspy

回答 2 投票 0

在 Angular 中手动创建滚动间谍

我已经在 MatDialog 中设置了滚动间谍，并且事件 activate.bs.scrollspy 似乎没有触发，或者可能确实触发了，但可能在窗口级别，并且它没有突出显示我的锚点

angular bootstrap-5 scrollspy

回答 1 投票 0

如何使用 Bootstrap ScrollSpy 在身体上使用多个目标

我想将 Bootstrap ScrollSpy 与多个导航、我的主导航和垂直子导航一起使用。我尝试了多种方法，例如：我想将 Bootstrap ScrollSpy 与多个导航、我的主导航和垂直子导航一起使用。我尝试了多种方法，例如： <body data-spy="scroll" data-target="#main-nav #subnav"> <body data-spy="scroll" data-target="#main-nav, #subnav"> $('body').scrollspy({target: "#main-nav"}); $('body').scrollspy({target: "#subnav"}); $('body').scrollspy({target: "#main-nav"}, {target: "#subnav"}); 放置包装div： <body data-spy="scroll" data-target="#main-nav"><div data-spy="scroll" data-target="#subnav"> 但没有任何效果...... 我怎样才能实现这个目标？谢谢！好吧，我找到了一种方法来实现我想要的。如果我没有定义scrollSpy的目标，我的所有导航链接都会被考虑： $('body').scrollspy({target: ''}); 我知道，这个问题很老了，但这里是我对多目标滚动间谍的实现。就像这样使用它：<body data-multiple-spy="scroll" data-target="#bs-example-navbar-collapse-1,#features-navbar .navbar-collapse" data-offset="70"</body> 插件： +function ($) { 'use strict'; // Multiple SCROLLSPY CLASS DEFINITION // =================================== function MultipleScrollSpy(element, options) { this.$body = $(document.body) this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) this.options = $.extend({}, MultipleScrollSpy.DEFAULTS, options) var target = (this.options.target || '').split(','); this.selector = target.map(function (s) { return s + ' .nav li > a' }) this.offsets = [] this.targets = [] this.activeTarget = [] this.scrollHeight = 0 this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this)) this.refresh() this.process() } MultipleScrollSpy.VERSION = '0.0.1' MultipleScrollSpy.DEFAULTS = { offset: 10 } MultipleScrollSpy.prototype.getScrollHeight = function () { return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight) } MultipleScrollSpy.prototype.refresh = function () { var that = this var offsetMethod = 'offset' var offsetBase = 0 this.offsets = [] this.targets = [] this.activeTarget = [] this.scrollHeight = this.getScrollHeight() if (!$.isWindow(this.$scrollElement[0])) { offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop() } for (var i = 0; i < this.selector.length; i++) { that.offsets[i] = []; that.targets[i] = []; this.$body .find(this.selector[i]) .map(function () { var $el = $(this) var href = $el.data('target') || $el.attr('href') var $href = /^#./.test(href) && $(href) return ($href && $href.length && $href.is(':visible') && [[$href[offsetMethod]().top + offsetBase, href]]) || null }) .sort(function (a, b) { return a[0] - b[0] }) .each(function () { that.offsets[i].push(this[0]) that.targets[i].push(this[1]) }) } } MultipleScrollSpy.prototype.process = function () { for (var k = 0; k < this.selector.length; k++) { var scrollTop = this.$scrollElement.scrollTop() + this.options.offset var scrollHeight = this.getScrollHeight() var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height() var offsets = this.offsets[k] || [] var targets = this.targets[k] || [] var activeTarget = this.activeTarget[k] var i if (this.scrollHeight != scrollHeight) { this.refresh() } if (scrollTop >= maxScroll) { return activeTarget[k] != (i = targets[targets.length - 1]) && this.activate(k, i) } if (activeTarget && scrollTop < offsets[0]) { this.activeTarget[k] = null return this.clear(k) } for (i = offsets.length; i--;) { activeTarget != targets[i] && scrollTop >= offsets[i] && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) && this.activate(k, targets[i]) } } } MultipleScrollSpy.prototype.activate = function (index, target) { this.activeTarget[index] = target this.clear(index) var selector = this.selector[index] + '[data-target="' + target + '"],' + this.selector[index] + '[href="' + target + '"]' var active = $(selector) .parents('li') .addClass('active') if (active.parent('.dropdown-menu').length) { active = active .closest('li.dropdown') .addClass('active') } active.trigger('activate.bs.scrollspy') } MultipleScrollSpy.prototype.clear = function (index) { $(this.selector[index]) .parentsUntil(this.options.target, '.active') .removeClass('active') } // MULTIPLE SCROLLSPY PLUGIN DEFINITION // ==================================== function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.scrollspy') var options = typeof option == 'object' && option if (!data) $this.data('bs.scrollspy', (data = new MultipleScrollSpy(this, options))) if (typeof option == 'string') data[option]() }) } var old = $.fn.multipleScrollspy; $.fn.multipleScrollspy = Plugin; $.fn.multipleScrollspy.Constructor = MultipleScrollSpy; // MULTIPLE SCROLLSPY NO CONFLICT // ============================= ($.fn.multipleScrollspy || {}).noConflict = function () { $.fn.multipleScrollspy = old return this } // MULTIPLE SCROLLSPY DATA-API // =========================== $(window).on('load.bs.scrollspy.data-api', function () { $('[data-multiple-spy="scroll"]').each(function () { var $spy = $(this) Plugin.call($spy, $spy.data()) }) }) }(jQuery); 还有一个非常古老的问题的答案。我的网站左侧显示一个垂直导航栏，对于宽屏，#navbar 很宽，包含图标和文本，它使用 ScrollSpy 来突出显示您当前滚动到的部分。对于较小的屏幕，#navbar-small仅是图标，没有文本，因此它更窄，它是使用引导断点来实现的，当屏幕较宽时隐藏小栏，反之亦然。使用MutationObserver（当这个问题最初发布时，它要么不可用，要么非常闪亮），你可以设置一个回调，以便在目标节点和可选的子节点发生变化时运行，所以我的解决方法是针对广泛的#navbar 是我网站上 ScrollSpy 的目标，然后根据需要使用其更改将 active 类添加/删除到我的 #navbar-small 元素子元素（我实际上只是复制 #navbar 中的所有类属性）到 #navbar-small 因为对我来说它们是相同的）。所以我的解决方案： // Make this function do whatever logic you need it to do, I'm lucky that I just // want to copy the exact same classes from #navbar's children to // #navbar-small's children. // const duplicateScrollSpyNavActive = function () { let navbarSmallLinks = document .getElementById("navbar-small") .getElementsByClassName("nav-link"); for (let link of navbarSmallLinks) { link.setAttribute( "class", document .getElementById(link.getAttribute("id").replace("small-", "")) .getAttribute("class"), ); } }; // This is the mostly generic part, just make duplicateScrollSpyNavActive above // do whatever you want for your use-case. window.addEventListener("load", function (event) { // // Make target be the element id that is the same as `data-bs-target` in your // HTML // const targetNode = document.getElementById("navbar"); // We only really care about the active class being added or removed so we // can just filter for "class" but we need subtree to be true so we can // detect changes on the children (the actual links that get highlighted). // const options = { subtree: true, attributeFilter: ["class"] }; const observer = new MutationObserver(duplicateScrollSpyNavActive); observer.observe(targetNode, options); });

jquery twitter-bootstrap multiple-instances scrollspy

回答 3 投票 0

ng-bootstrap 滚动间谍在没有高度的情况下无法工作？

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下：我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下： <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到，我的问题是我没有向我的 div 提供 height，这是事实。但我的滚动间谍部分遍布整个页面，而不是一个小 div，（导航本身是 sticky-top）。所以我不能给它高度。我知道有替代方法 - 刷新窗口滚动上的滚动间谍，但我没有找到可以帮助我的正确代码。你能解决我的问题吗？为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。非常感谢！附上 stackblitz 演示的链接注意：我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy （我想它是非常相似的库）我做什么：我将所有内容（包括导航）包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比（1 是 100%）包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯，问题是如何“滚动到”。 “链接”应该作为链接使用。第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件，我们需要使用提供者，provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后，我们需要考虑到我们的页面确实没有滚动，div“包装器”是谁拥有滚动。因此，我们订阅 router.events，当事件有“锚点”时，我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子

angular ng-bootstrap scrollspy

回答 1 投票 0

Bootstrap 的 Scrollspy：页面重新加载后滚动具有不同偏移量时的偏移量

我的 SPA 网站（单页应用程序）上的导航滚动间谍有问题。当我在网站上正常滚动时，偏移量是正确的，并且导航获得正确的活动类。现在当我

jquery twitter-bootstrap scrollspy

回答 1 投票 0

Bootstrap 5 rollspy 突出显示错误的scrollspy

滚动间谍链接导航并仅突出显示上面的一个。否则工作正常。我从 getbootstrap.com 复制并粘贴了准确的 HTML 和 CSS 代码。但它的工作方式与 getbootstrap.com 不同什么...

html css bootstrap-5 scrollspy

回答 1 投票 0

带有多个导航栏的引导滚动间谍

这是一把小提琴。由于此问题中描述的有关创建响应式导航菜单的问题，我需要有两个相同的导航元素，一个对于小屏幕可见，另一个对于...