当元素到达某个点时更改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

检查这个小提琴。

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

或者，您可以查看jquery-waypoints插件。使用非常简单：

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