Javascript 如何防止div离开屏幕？

我想在stackoverflow的提问页面上做一些类似“如何格式化”的事情

最初，

div

具有

position:relative

。当

div

的任何部分脱离屏幕时，它将变为

位置：固定

如何实施

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

开始时，

div

是窗口顶部的Xpx。
当我向下滚动（X+Y）px时，通常

div

的顶部Ypx部分将被隐藏。
但我希望整个

div

都固定在窗口的顶部。i、 e.{位置：固定；顶部：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});
        } 
    });
});

---

我写了一段真正有效的代码：

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

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

---

但我不知道是否有更好的解决方案。

我写了一段代码，它确实有效：

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

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

$(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});
    });
});

---

但我不知道是否有更好的解决办法。

我改编了上面@lai yu hsuan的代码，但它没有起作用。如果你向上滚动，在初始滚动之后，粘性元素将消失，但这对我来说是有效的。我希望这对别人有帮助！请注意，我将sticky元素更改为类“sticky top”，以便它可以应用于多个容器

$(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});
    });
});

jQuery(document).ready(function()
{
    var e = jQuery('.sticky-top');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;
    var positionLeft = e.position().left;
    var stickyWidth=e.width();
    var stickyHeight=e.height();

    jQuery(window).scroll(function(event) {
        if(jQuery(window).scrollTop() + 20 > offsetTop) {
                e.css({'position' : 'fixed', 'top' : '20px','left':positionLeft+'px'});
                e.css({'width':stickyWidth+'px','height':stickyHeight+'px'});
        }
        else {
                   e.css('position', 'relative');
                   e.css('top', '');
                   e.css('left','');
        } 
    });
});

---

我改编了上面@lai-yu-hsuan的代码，但它不起作用。如果你向上滚动，在初始滚动之后，粘性元素将消失，但这对我来说是有效的。我希望这对别人有帮助！请注意，我将sticky元素更改为类“sticky top”，以便它可以应用于多个容器

jQuery(document).ready(function()
{
    var e = jQuery('.sticky-top');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;
    var positionLeft = e.position().left;
    var stickyWidth=e.width();
    var stickyHeight=e.height();

    jQuery(window).scroll(function(event) {
        if(jQuery(window).scrollTop() + 20 > offsetTop) {
                e.css({'position' : 'fixed', 'top' : '20px','left':positionLeft+'px'});
                e.css({'width':stickyWidth+'px','height':stickyHeight+'px'});
        }
        else {
                   e.css('position', 'relative');
                   e.css('top', '');
                   e.css('left','');
        } 
    });
});

---

OP没有指定任何关于位置（

top

）的要求。它只是用于平滑动画。OP没有指定任何关于位置（

top

）的要求。它只是用于平滑动画。我没有看到任何与该代码不协调的地方，除了您可能希望在

else

块中将两个

e.css

连接在一起之外，请删除不必要的

事件

参数并修复部分格式设置。编辑：我将发布一个答案。我看不到任何与该代码不协调的地方，除了您可能希望在

else

块中将两个

e.css

连接在一起，删除不必要的

事件

参数并修复部分格式。编辑：我会发布一个答案。