javascript - 如何防止 div 离开屏幕？

Question

我想在 stackoverflow 的“提问”页面上执行类似“如何格式化”的操作。

最初 div 有 position:relative。当 div 的任何部分超出屏幕时，它将变为 position:fixed。

如何实现？

编辑:更准确地说，我想要的是:

一开始，div是距离窗口顶部的Xpx。
当我向下滚动 (X+Y)px 时，通常 div 的顶部 Ypx 部分将被隐藏。
但我希望整个 div 固定在窗口的顶部。即 {position:fixed;top:0}
如果我向后滚动，div 将从窗口顶部返回到 Xpx。

更准确地说，我想要一个更漂亮的代码:

$(document).ready(function()
{
    var e = $('#myDiv');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;

    $(window).scroll(function() {
        if($(window).scrollTop() > offsetTop) {
            e.css({'position' : 'fixed', 'top' : '0px'});
        }
        else {
            e.css({'position': 'relative', 'top': positionTop});
        } 
    });
});

Answer 1

$(document).ready(function()
{
    var e = $('#myDiv');
    var jWindow = $(window);
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;

    jWindow.scroll(function()
    {
        if(jWindow.scrollTop() > offsetTop)
            e.css({'position':'fixed', 'top':0});
        else
            e.css({'position':'relative', 'top':positionTop});
    });
});