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

Question

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

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

在javascripts中，我相信这个函数控制链接突出显示：$（window）.scroll（function（）{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();

有没有办法改变代码以适应所有屏幕尺寸？我应该如何使用bootstrap交互部分？

我仍然是前端开发的新手，感谢任何帮助！

Answer 1

修复你的if语句：

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