平滑滚动效果问题

Question

这是我上一篇文章的附加问题： Smooth scrolling link effect issue with vertical menu

我正在修改模板https://codepen.io/eksch/pen/xwdOeK以适应我的网站内容。 我的部分的长度将比模板的设计方式更长。 从javascript来看，平滑滚动效果与浏览器和section div的位置密切相关，例如：

$(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 - $(this).height() <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });
}).scroll();

是否有可能将部分的长度增加到 100% 或更大并仍然保持效果？ （默认长度对于我的内容来说不够大）我尝试将最后一部分的 div 调整为 100% 并且高光效果停止工作，并且 div 后面有一个尾随空白。

尾随空间：

我对前端很陌生，我会在这个问题上提供任何建议或帮助。 谢谢！

Answer 1

我玩过你的 CSS，我认为这就是你想要的。

// in .page-section
height: 90%;
width: 64%;
margin-left: 30%;
margin-top: 4%;

// in .navigation
margin-left: 0%;
height: 100%;
top: 0;

你可以查看我更新的CodePen

编辑

为了它

如果部分长度需要向下滚动，则工作

或者

允许超过浏览器高度的内容

只需改变height: 90%; 到min-height: 90%; 在.page-section

检查上面的 CodePen 以获取更新的代码。