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

在position:fixed上使用css #nav：

Here is jsFiddle.

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

滚动到容器后动画div

1 个答案: