时间戳

首页 > 解决方案 > 平滑滚动效果问题

javascript - 平滑滚动效果问题

问题描述

这是我之前帖子中的一个附加问题：垂直菜单的平滑滚动链接效果问题

我正在修改模板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 后面有一个尾随空格。

在此处输入图像描述

尾随空间：

在此处输入图像描述

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

标签： javascripthtmlcsssmooth-scrolling

解决方案

我玩过你的 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 以获取更新的代码。

推荐阅读