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

我在页面上有一个图像，当它加载时，它的绝对位置位于页面的中心。当用户向下滚动页面，图像到达屏幕顶部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%）：

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

我正在寻找的图像

编辑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%"});
    }
});

检查这把小提琴。

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:

---

或者，您可以看看插件。使用起来非常简单：

$('#your-div').waypoint(function() {
  console.log('25% from the top');
  // logic when you are 25% from the top...
}, { offset: '25%' });

---

你所做的是制作一个可固定的菜单。当用户滚动经过一个点时，您可以添加/删除一个css类，并在css类中定义您需要的规则。我已经用您的代码编写了一个示例-您能解释一下它与当前的不同之处吗？当元素位于窗口顶部的20%位置时，需要将其位置切换为固定位置。我尝试了我在原始帖子中发布的代码，但它不起作用。

#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;
}

$('#your-div').waypoint(function() {
  console.log('25% from the top');
  // logic when you are 25% from the top...
}, { offset: '25%' });