滚动到容器后动画 div

Question

我创建了一个#nav div，我想用jquery 对其进行动画处理，并在scrollto 功能完成后将其滑动到具有.active 类的部分。 .active 类被附加到被点击的部分。

我的问题是我不知道如何获取浏览器窗口和活动部分之间的距离，并为#nav div 设置动画以将其滑动到那里。

更新：我不能使用 position-fixed as：

• #nav 将成为响应式 CSS 网格的一部分。
• 如果最后一个部分很短，#nav div 将不会向下滚动 超出浏览器窗口允许的范围。

我的js：

$("a").click(function () {

    //remove class  from href
    $(".active").removeClass("active");

    //add class to href
    var highlight_href = $(this).attr('href');
    $(highlight_href).addClass("active");


    $('html, body').scrollTo($('.active'), 300, {
        onAfter: function () {
            $("#nav").stop().animate({
                // animate #nav and slide to the section with the .active class
            });
        }
    });

});

我还创建了jsfiddle：

Answer 1

在#nav 上使用css position:fixed：

Here is jsFiddle.

#nav {
    position:fixed;
    right:0px;
    top:0px;
    margin:20px;
}