jquery - 滚动到容器后为 div 设置动画

Question

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

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

更新：我不能使用位置固定为：

• #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

position:fixed使用css #nav：

这是jsFiddle。

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