Question

我在使用Bootstrap的Scrollspy在我的网站上工作时遇到了很多麻烦。特别是我想要的是，当用户向下滚动我的网站时，导航栏中相应的导航栏标题将突出显示。

我网站上的所有部分都有＆＃34; id＆＃39; s＆＃34;并且正确链接到导航栏代码，但由于某种原因，即使我已将Scrollspy放在body元素中：

<body data-spy="scroll" data-target="baseNav" data-offset="50">,

它仍然无法发挥作用，因为我期待它。

这些是我想要工作的东西：

用户向下滚动我的网站，并突出显示与用户滚动到的部分对应的导航栏文本。
能够将下拉菜单和其中一个下拉项链接到相同的ID。例如，假设我的导航栏上有链接，其中显示＆＃34; Fruits＆＃34;，并且它有一个下拉菜单，其中包含下拉项目，例如＆＃34; Bananas＆＃34;，＆＃34; Oranges＆＃34;和＆＃34;苹果＆＃34;。当出现下拉菜单时，如果用户点击＆＃34; Bananas＆＃34;，它应该将它们带到＆＃34; Bananas＆＃34;部分，也是因为它是＆＃34; Fruits＆＃34;中的第一个项目。部分，如果用户没有访问下拉菜单，那么当点击＆＃34; Fruits＆＃34;在导航栏中仍然应该将它们带到＆＃34;香蕉＆＃34;，因为它是网站上与水果相关的第一段内容。

我已在此处包含我的代码，非常感谢您在调试此问题时提供的帮助。

尽我所能，我粘贴了我的代码，并为我的依赖项添加了CDN链接到这个JFiddle。由于我使用SCSS进行开发，因此有些CSS不能很好地工作：https://jsfiddle.net/04ghwy60/2/

Answer 1

我认为我发现将此内容写入我的＆custom; js＆＃39;工作：

    // Smooth scrolling
scrollLink.click(function(e) {
  e.preventDefault();
  $('body,html').animate({
    scrollTop: $(this.hash).offset().top
  }, 1000 );
});

// Active link switching
$(window).scroll(function() {
  var scrollbarLocation = $(this).scrollTop();

  scrollLink.each(function() {

    var sectionOffset = $(this.hash).offset().top -41; //41 is just a random magic number i found to work best as an offset to get nice division between 'actives'

    if ( sectionOffset <= scrollbarLocation ) {
      $(this).parent().addClass('active');
      $(this).parent().siblings().removeClass('active');
    }
  })

})

})

在我的Bootstrap 4.0项目上配置Scrollspy和SmoothScrolling时出现问题

1 个答案: