jquery - 滚动时的 JQuery Notification-System Offset

Question

我正在制作自己的通知系统，因为我发现几行代码比包含一个具有许多未使用功能的整个插件更好，所以请不要推荐任何插件。

这是一个小提琴：http: //jsfiddle.net/PDa7a/

您可以通过按Click me!正文中的 -link 来触发通知。只要用户不滚动，这将很好地工作。但是，当用户滚动时，通知不会动画到屏幕顶部，而是到中心左右。

这是代码：

var notificationHeight = 0;

function notification(message, style) {
    var message = $("<span class='notification' data-set='1'>" + message + "<span class='closenotification'>&#10006;</span></span>").appendTo("#notificationContainer");
    notificationHeight += message.outerHeight();
    console.log(notificationHeight);
    message.animate({
        top: notificationHeight - message.outerHeight() + "px"
    }, function () {
        //after start-animation
    }).on('click', function () {
        var thisser = $(this);
        if (thisser.data('set') == 1) {
            thisser.data("set", 0);
            thisser.css('z-index', '9');
            var thisheight = thisser.outerHeight();
            notificationHeight -= thisheight;
            thisser.nextAll().each(function () {
                $(this).animate({
                    top: $(this).offset().top - thisheight + 'px'
                }, {
                    queue: false
                });
            }); - thisser.animate({
                top: thisser.offset().top - thisheight + 'px'
            }, function () {
                thisser.remove()
            });
        }
    });
}

Answer 1

改变

thisser.animate({
    top: thisser.offset().top - thisheight + 'px'
}, function () {
    thisser.remove()
});

至

thisser.animate({
    top: thisser.position().top - thisheight + 'px'
}, function () {
    thisser.remove()
});

（offset到position）。

否则你会得到错误的值。