Question

我正在创建自己的通知系统，因为我发现几行代码比包含许多不使用的功能的整个插件更好，所以请不要建议任何插件。

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

以下是代码：

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）。

否则你会得到错误的值。

滚动时的JQuery Notification-System Offset

1 个答案: