javascript - 滚动超过元素的 50% 时如何粘贴 div？

Question

这可能是一个简单的问题，但请帮忙! 我已经使用下面的代码实现了一个粘性 div 但我需要知道如何更改 div 被“卡住”的位置？

我想要的是让我的 div 仅在 50% 的内容滚动到顶部时卡住。目前它到达顶部时会卡住，但我希望其中的 50% 在卡住之前继续滚动到一半(大致)。

$(document).ready(function() {
    var s = $("#picture1");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
        if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", s.height()); } else { s.removeClass("stick"); $("body").css("margin-top", 0); }

    });
});

和CSS

.stick {
    position:fixed;
    top:0px;
    /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
    z-index: 1000;
}

Answer 1

将 windowpos >= pos.top 更改为 windowpos >= (s.height()/2) + pos.top

编辑

http://jsfiddle.net/BVK2q/