Question

我是javascript的初学者，并且无法完全掌握我需要改变的内容才能使其发挥作用。

这是link。

我有一个带有可折叠固定导航的容器。您应该能够单击每个导航项并滚动到该章。问题是：它只适用于顶层或第1章＆＃39;。当我点击导航章节两次时，它会上下移动，而不是简单地转到它的锚点。

这是我在没有固定导航设置的情况下找到的javascript - 要改变它以便按照我想要的方式工作？：

function scrollNav() {
  $('.nav a').click(function(){
    //Toggle Class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('#container').stop().animate({
        scrollTop: $(   $(this).attr('href') ).offset().top - 180
    }, 400);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

非常感谢！

Answer 1

查看此更新的fiddle。我添加了jquery库和一个用于调试的控制台。

我发现了两个主要问题：

首先，在此使用.position()代替.offset()。偏移始终相对于文档，而位置相对于偏移父级（可能是也可能不是文档）。见this answer。由于您对相对于父容器的位置感兴趣，因此您应该使用.position().top。

一旦到位，就更容易推理出scrollTop的正确值。滚动浏览目标元素后，其相对于#container的位置将为负数。如果chapterPosition为-300且当前的scrollTop为1000，我们希望滚动到700.

但请注意，这是因为#container div是固定位置。在上面的小提琴中，我提出了另一种计算滚动的方法，如果你不想要粘贴的标题＆amp;所以不需要修复#container。

仅从第一个元素

1 个答案: