当元素达到特定点时更改CSS属性

Question

I have an image on a page that have a absolute position to be in the center of the page when it loads. When the user scroll down the page and the image reach a position of 20% from the top of the screen, I want to change the position of that image to fixed so it always stays on the screen at 20% from the top of the screen.

I guess that I will have to do something like this :

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

This line is where I should put the 20% from top but I don't know how :

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

EDITED CODE (still not working but I forgot to post the var in my original post and the scroll height was set at 50% instead of 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");
        }
    });
});

English is not my first language so I drew what I want to do in case my explanation was not clear :

Image of what I'm looking for

EDIT 2 (ANSWER) : Stackoverflow won't let me answer my question because I don't have enough reputation so here is the working code I came with :

$(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

Check this 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;
}

Answer 2

Alternatively, you can take a look at jquery-waypoints plugin. The use is as easy as:

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