根据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; }
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 and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 2
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 and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 3
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 and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
正如你所看到的，我使用了滚动间谍但是破坏了它的规则 （它声明它需要锚点“指向具有id的元素”）：我的导航栏的项目指向网站的其他页面而不是指向的部分当前页面。
什么是适合上述情况的替代方案 ？
我想我会更容易正确利用Bootstrap scrollspy的“activate.bs.scrollspy”事件而不是“违反其规则”并简单地使用javascript代码覆盖默认的href导航。
所以我建议你将id添加回div并将匹配的framgment hrefs添加到锚点，让Bootstrap通过obj.relatedTarget属性为你提供“activate.bs.scrollspy”事件中的目标，根据需要切换类并且可以选择从导航项中删除“激活”类，这样就不会显示这些部分是相关的。 如果您有其他部分，请尝试使用隐藏的锚点或隐藏的导航。
当然， 在我看来 ， 最干净的方法是抛弃scrollspy并使用window.scrollY和$（window）.on（’scroll’，…）。
看看片段：
$(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); //Optional: Remove the active class from the anchor so it doesn't look like the nav is linked to the sections $('.navbar-nav a[href="' + obj.relatedTarget + '"]').removeClass('active'); }); //Here we do the actual navigation $('.navbar-nav a').click(function(e) { //Prevent anchor's default behaviour of briefly jumping to the given section before navigating to another page e.preventDefault(); //Substring to eliminate the leading "#" window.location.href = $(e.target).attr('href').substring(1) + '.html'; })
.page-section { padding: 70px 10px } .page-section.bg-dark * { color: #fff; }
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 and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 2
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 and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 3
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 and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!