动画眼睛 - 为什么滚动时它们会跟随？

Question

如果您导航到：http://laboratory.stratusweb.co.uk/lea/（尚未完成）

您会注意到眼睛跟随光标。

我想不通的是，当你滚动页面时，为什么眼睛会向下移动？

欢迎提出任何建议！

忘记添加eyes.js代码：

var windowX = -1;
var windowY = -1;
jQuery(document).ready(function() {
    var canvas = document.getElementById("debugCanvas");
    canvas.width = document.width;
    canvas.height = document.height;
    jQuery(document).mousemove(function(e) {
        var mousePosition = {
            'x' : e.pageX,
            'y' : e.pageY
        };
        var context = document.getElementById("debugCanvas").getContext("2d");
        jQuery(".eyeContainer").each(function(i, i2) {
            var eyeContainerPosition = $(this).offset();
            var eyePosition = {
                'x' : eyeContainerPosition.left + $(this).width() / 2 +1,
                'y' : eyeContainerPosition.top - $('body').scrollTop() + $(this).height() / 2 +1
            }
            var slope = getSlope(eyePosition, mousePosition);
            var toCenterdistance = getDistance(eyePosition, mousePosition);
            var targetDistance = toCenterdistance - ($(this).width() / 2);
            if(toCenterdistance > ($(this).width() / 2)) {
                var x = Math.cos(Math.atan(slope)) * targetDistance;
                if(eyePosition.x > mousePosition.x) {
                    x += mousePosition.x;
                } else if(eyePosition.x < mousePosition.x) {
                    x = -x + mousePosition.x;
                }
                var y = Math.sin(Math.atan(slope)) * targetDistance;
                if(eyePosition.x > mousePosition.x) {
                    y += mousePosition.y;
                } else if(eyePosition.x < mousePosition.x) {
                    y = -y + mousePosition.y;
                }
                x -= $(this).height() / 2;
                y -= $(this).height() / 2;
            } else {
                x = mousePosition.x - ($(this).width() / 2);
                y = mousePosition.y - ($(this).width() / 2);
            }
            var element=$("#eyeBall_" + $(this).attr("rel"));
            element.css({
                'left' : x + 'px',
                'top' : y + 'px',
            });
        });
    })
});
function getSlope(loc1, loc2) {
    return (loc1.y - loc2.y) / (loc1.x - loc2.x);
}
function getDistance(loc1, loc2) {
    return Math.sqrt(Math.pow((loc1.x - loc2.x), 2) + Math.pow((loc1.y - loc2.y), 2));
}

Answer 1

这一行：

var eyeContainerPosition = $(this).offset();

根据页面滚动的距离返回不同的值 -- 它返回相对于文档顶部的偏移量，而不是窗口顶部。

换行试试

'y' : eyeContainerPosition.top + $(this).height() / 2 +1

与

'y' : eyeContainerPosition.top - $('body').scrollTop() + $(this).height() / 2 +1

弥补这一点。

Answer 2

要在滚动时将某些元素保持在屏幕上的固定位置，您可以指定 CSS 样式属性 position: fixed。

W3C documentation on position property.

更新：

当你查看源代码时，你会看到包含眼睛的 div <div class="big_face_holder"> 确实设置了position: fixed。