在最后一项滚动时添加所选类

Question

在最后一个项目的页面滚动（不是点击）上添加选定的课程，其他项目选择正在运行。有关详情，请参阅

我的脚本在页面滚动中添加选定的课程。

//Selected Using Scroll
            $(window).scroll(function () {
                var scrollPosition = $(document).scrollTop();
        $('#side-nav-id .scrollTo').each(function () {
            var currentLink = $(this);
            var refElement = $(currentLink.attr("href"));
            if (refElement.position().top <= scrollPosition + 100) {
                $('#side-nav-id .scrollTo').removeClass("selected");
                currentLink.addClass("selected");
            }
            else{
                currentLink.removeClass("selected");
            }
        });
                });

Answer 1

我的猜测是，最后一节标题永远不会达到你用...建立的位置限制

if (refElement.position().top <= scrollPosition + 100) {

...因内容长度（不足以让标题达到该点）

我认为这是这种行为的常见问题，因为如果你有短节，那么最后一节将永远不会到达顶部。

您可以使用的一些选项......

1. 将限制降低，以便您的上一部分到达。不是很酷，因为如果最后一段很短，你必须把限制超低，所以整个行为都会破裂。

2. 在容器的末尾添加填充以允许滚动继续，直到最后一部分达到该限制。

3. 添加一些'else'以检查您是否在页面底部，并在这种情况下突出显示最后一个菜单项。有点像...

   else if($(window).scrollTop() + $(window).height() == $(document).height()) {
   

我希望它有所帮助