Tag: scrollspy

Bootstrap Affix类跳到底部

我已经设法让scrolllspy和affix插件工作得很好，但每当用户滚动到页面底部时（如果使用一个小的浏览器窗口），词缀类开始与另一个冲突，并且词缀在状态之间跳转。 这里可以看到一个例子： http ： //devng.sdss.org/results-science/ CSS是： .affix-top,.affix{ position: static; } #sidebar li.active { border:0 #eee solid; border-right-width:5px; } @media (min-width: 979px) { #sidebar.affix-top { position: static; margin-top:30px; } #sidebar.affix { position: fixed; top:70px; } #sidebar.affix-bottom { position: fixed; bottom: 400px; } } 和JS： $(‘#leftCol’).affix({ offset: { top: 235 ,bottom: 400 } }); /* activate scrollspy […]

在bootstrap scrollspy上简单缓和

对于那些知道javascript / jquery好的人来说，这是一个非常简单的问题。 我对这一切都很陌生，无法做到。 我找到了计算导航栏偏移量的代码，如下所示： var offset = 50; $(‘.navbar li a’).click(function(event) { event.preventDefault(); $($(this).attr(‘href’))[0].scrollIntoView(); scrollBy(0, -offset); }); 这是迄今为止我所拥有的小提琴的例子 。 正如您所看到的，如果您单击导航栏中的链接，它只会跳到部分。 在这个脚本中添加easing动的位置使其向下滚动更平滑？ 使用原始代码，我首先找到了那个流畅的滚动但是新脚本丢失了。 这是旧代码： $(function() { $(‘a.page-scroll’).bind(‘click’, function(event) { var $anchor = $(this); $(‘html, body’).stop().animate({ scrollTop: $($anchor.attr(‘href’)).offset().top }, 1500, ‘easeInOutExpo’); event.preventDefault(); }); });

使用scroll-spy更改导航栏背景类

我正在Bootstrap 4中的一个网页上工作，该网页包含浅色和深色背景以及固定导航栏。 导航栏是黑暗的（具有bg-dark的css类），虽然它很容易在光线部分可见，但它与黑暗部分无法区分。 我已将Bootstrap的滚动间谍添加到页面中，但它的作用是将active类添加到导航栏项，如下所示： .page-section { padding: 70px 10px } .page-section.bg-dark * { color: #fff; } Section 1 Section 2 Section 3 Section 1 Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section […]

使用scrollspy更新地址栏window.location哈希

我有一个带有scrollspy的菜单（使用twitter boostrap）。 我想在用户向下滚动到下一部分时更新window.location.hash 。 用户向下滚动时，以下代码有效： $(window).on(‘activate.bs.scrollspy’, function (e) { location.hash = $(“a[href^=’#’]”, e.target).attr(“href”) || location.hash; }); 但是，当用户向上滚动时，它不能很好地工作。 这样做的原因是设置新的location.hash会触发浏览器导航到相应的锚点。 这会触发连锁反应，用户将立即在页面顶部结束。 js-fiddle中的演示 现在解决这个问题最简单的方法是什么？

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

我想使用带有多个导航的Bootstrap ScrollSpy，我的主导航和垂直子挡。 我试过多次这样的事情： $(‘body’).scrollspy({target: “#main-nav”}); $(‘body’).scrollspy({target: “#subnav”}); $(‘body’).scrollspy({target: “#main-nav”}, {target: “#subnav”}); 放包装div： 但没有什么工作得好…… 我该如何实现这一目标？ 谢谢！

Bootstrap 3 – 带侧边栏的Scrollspy

我正在使用Bootstrap 3.我想重新创建与Bootstrap站点上的文档中的侧栏相同的function。 下面是我的代码，它也在这里： http ： //bootply.com/82119 两个问题。 当您向下滚动每个部分的页面时，侧边栏项目不会突出显示。 当您单击侧栏项时，它会跳转到相关锚点，但一半的内容不可见。 更改data-offset值似乎无效。 我究竟做错了什么？ Content 1 Content 2 Content 3 Content 4 Content 5 Content 1 At Bootply we attempt to build simple Bootstrap templates that utilize… Content 2 Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto… Content 3 Rem aperiam, eaque ipsa quae […]

如何停止滚动比div高度更长的div？

我有图像，对齐到右侧，位置固定，大文本内容与左侧对齐。 如何在右侧执行图像和文本内容应该只能使用bootstrap滚动。 在这里我的代码。 感谢您的时间和建议 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora […]

根据hover的页面部分的背景更改固定导航栏的类

我正在Bootstrap 4的一个网站上工作，该网站包含浅色和深色背景以及固定导航栏。 导航栏是黑暗的（具有bg-dark的css类），虽然它很容易在光线部分可见，但它与黑暗部分无法区分。 当用户到达黑暗区域时 （我在StackOverflow上建议了解决方案 ），我尝试将导航栏的navbar-dark bg-dark navbar-light bg-light $(window).on(‘activate.bs.scrollspy’, function (e,obj) { if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { return; } var isBGLight = $(obj.relatedTarget).hasClass(‘bg-light’); $(‘.navbar’).toggleClass(‘navbar-dark bg-dark’, isBGLight) .toggleClass(‘navbar-light bg-light’, !isBGLight); }); .page-section { padding: 70px 10px } .page-section.bg-dark * { color: #fff; } Logo About Us Services Contact Section 1 Try to scroll […]