平滑滚动效果问题

Question

这是我之前 post 的附加问题：

我正在修改模板 https://codepen.io/eksch/pen/xwdOeK 以适应我的网站内容。我的部分的长度将比模板的设计方式长得多。从 javascript 来看，平滑的滚动效果与浏览器的位置和 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.

后面有尾白space

尾随 space:

我对前端还很陌生，我很乐意就此问题提出任何建议或帮助。谢谢！

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

编辑

为了它

work if the section length requires scrolling down

或到

allow for contents that exceed the browser height

只需将 height: 90%; 更改为 min-height: 90%; .page-section

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

平滑滚动效果问题

Smooth scrolling effect issue

javascript

html

css

smooth-scrolling