javascript - 当元素到达某个点时更改 CSS 属性

Question

我在页面上有一个图像，它在加载时具有绝对位置，位于页面的中心。当用户向下滚动页面并且图像到达距屏幕顶部 20% 的位置时，我想将该图像的位置更改为固定，以便它始终停留在屏幕顶部距屏幕顶部 20% 的位置.

我想我将不得不做这样的事情:

$(function () {
    $(window).scroll(function () {
        var aheight = $(window).height() / 2;
        if ($(this).scrollTop() >= aheight) {
            $("#image").css("position", "fixed");
        }
        else {
            $("#image").css("position", "absolute");
        }
    });
});

这一行是我应该从顶部开始放置 20% 的地方，但我不知道如何放置:

var aheight = $(window).height() / 2;

已编辑代码(仍然无法正常工作，但我忘记在我的原始帖子中发布 var，并且滚动高度设置为 50% 而不是 20%):

var t = $("#logo").offset().top;

$(function () {
    $(window).scroll(function () {
        var aheight = $(window).height() / 5;
        if ($(this).scrollTop() >= aheight) {
            $("#logo").css("position", "fixed");
        }
        else {
            $("#logo").css("position", "absolute");
        }
    });
});

英语不是我的第一语言，所以我画了我想做的，以防我的解释不清楚:

我正在寻找的图片

编辑 2(答案):Stackoverflow 不会让我回答我的问题，因为我没有足够的声誉，所以这是我附带的工作代码:

$(document).scroll(function(){
    var bheight = $(window).height();
    var percent = 0.3;
    var hpercent = bheight * percent;

    if($(this).scrollTop() > hpercent)
    {   
        $('#logo').css({"position":"fixed","top":"20%"});
    }else{
        $('#logo').css({"position":"absolute","top":"50%"});
    }
});

Answer 1

检查这个 fiddle 。

http://jsfiddle.net/livibetter/HV9HM/

Javascript:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

CSS:

#sticky {
    padding: 0.5ex;
    width: 600px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}