如何防止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離開屏幕？

回答

相關問題