JQuery通知系统滚动时的偏移量

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

否则，你会得到错误的值。