垂直菜单的平滑滚动链接效果问题答案

【问题标题】：Smooth scrolling link effect issue with vertical menu垂直菜单的平滑滚动链接效果问题
【发布时间】：2019-07-18 08:34:52
【问题描述】：

我正在尝试解决此模板的问题： https://codepen.io/eksch/pen/xwdOeK

导航菜单上的突出显示效果仅适用于降低浏览器高度，如果我将窗口大小调整为全屏 (https://codepen.io/eksch/full/xwdOeK) 并向下滚动到第 7 部分，导航菜单上的链接将不会突出显示。（我在 imac 中从 27 观看）

在 javascripts 中，我相信这个函数控制链接突出显示： $(窗口).scroll(函数() { var scrollDistance = $(window).scrollTop();

    // Show/hide menu on scroll
    //if (scrollDistance >= 850) {
    //      $('nav').fadeIn("fast");
    //} else {
    //      $('nav').fadeOut("fast");
    //}

    // Assign active class to nav links while scolling
    $('.page-section').each(function(i) {
            if ($(this).position().top <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });
}).scroll();

有没有办法更改代码以适应所有屏幕尺寸？我应该如何使该部分与引导程序交互？

我还是前端开发的新手，希望得到任何帮助！

【问题讨论】：

标签： javascript html css bootstrap-4 smooth-scrolling

【解决方案1】：

修正你的 if 语句：

if ($(this).position().top - $(this).height() <= scrollDistance)

【讨论】：