如何防止div离开屏幕？

我想对“stackoverflow的问题”页面上的“如何格式化”做类似的操作。如何防止div离开屏幕？

本来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}); 
     } 
    }); 
});

来源

2011-08-08 Lai Yu-Hsuan

我没有看到任何与不雅的代码，比其他的事实你可能想将两者连接起来'e.css'我们一起在'else'块，去掉不必要的'event'说法并修复部分格式。 **编辑**：我会发布一个答案。 – foxy

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

来源

2011-08-08 09:21:06 foxy

我写了一段代码，这还真管用：

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

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

来源

2011-08-08 07:54:26

OP没有指定任何关于位置（'top'）的要求。 – foxy

这只是为了流畅的动画。 –

我改编@ lai-yu-huan的代码上面，它没有工作。如果您向后滚动，粘性元素会在初始滚动后消失，但这是按照我的预期工作的。我希望这可以帮助别人！请注意，我将粘性元素更改为“粘性顶层”类，以便适用于多个容器。

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',''); 
     } 
    }); 
});

来源

2016-03-29 13:47:21

如何防止div离开屏幕？

回答

相关问题