阻止Div滾動另一個div

基本上我有這個容器包含兩個div。當向下滾動並且div容器被窗口傳遞時，它將粘貼到屏幕的頂部，然後沿着屏幕向下滾動，但容器div內的div與頁腳重疊。阻止Div滾動另一個div

我似乎無法弄清楚如何阻止頁腳被重疊，我希望它在div容器的底部到達剛剛停止移動的頁腳的盡頭，但是在屏幕仍然沿着頁面向後滾動時。目前它所做的只是在通過時關閉屏幕並將其重新放回原來的位置。

這裏是JS以下部分：

function sticky_relocate_2() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('.sticky-anchor').offset().top + 210; 


    if (window_top > div_top) { 
      $('#right_side_inner_container').addClass('sticky_2') 


    } else 
      $('#right_side_inner_container').removeClass('sticky_2') 

} 

google.setOnLoadCallback(function() 
{ 
    $(window).scroll(sticky_relocate_2); 
sticky_relocate(); 
});

DIV ID = right_side_inner_container，這是我想被移動和停止，當它到達頁腳容器的id。 div id =頁腳的頁腳id。

我在其他一些網站上看到，當它到達某個點時，它會從'頂部'css中縮小，所以每一個滾動的像素都會不斷從它上面扣除。我似乎無法弄清楚如何去做。

任何幫助，將不勝感激。

編輯：爲例

http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h

如果你看一下右邊的div，當您滾動過去它堅持，我可以做，但屏幕

當你不斷滾動下來，片刻後它停止並不會繼續。這就是我正在努力做的事情。

當我使用檢查元素（鉻）頂部的CSS不斷扣除。

編輯2：添加樣式：

#right_side_inner_container { 
    width 300px; 
    height: 600px; 
    background: transparent; 
    text-align: center; 
    color: black; 
} 

#right_side_inner_container.sticky_2 { 
    width: 300px; 
height: 600px; 
background: transparent; 
position: fixed; 
top: 0; 
    margin-top: -8px; 
} 

#footer { 
width: 100%; 
height: 200px; 
margin: 5px 0 0 0; 
clear: both; 
background: blue; 
}

我想右內側容器div來阻止它到達頁腳DIV之前。當原始div滾動過去時允許它在滾動過去時跟隨屏幕，粘性類被添加。

來源

2012-11-09 user1301430

從你的評論你說你改變了CSS爲固定（大概與其他風格一起），這是要走的路......減去像素，如上面描述的是一種效率低下的方法，你會介意發佈你的CSS樣式？ – anson

當然我加了CSS到帖子 – user1301430

好吧，你有幾乎正確的想法。下面是使用你的概念的一個快速解決方案的小提琴，不介意我添加了模仿你的情況的「絨毛」，只要注意fixie框的JS和CSS樣式：http：// jsfiddle。net/z4q3v/ – anson

您是否嘗試過添加一些padding-bottom<body>或滾動div的容器？

來源

2012-11-09 00:32:37 Neps

是啊，沒有做任何事情。當div粘貼到屏幕上時，我添加了一個css類，使它成爲頂部：0和固定的位置，所以不知道填充是否會影響它。 – user1301430

如果您看http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h當你向下滾動然後停在某一點時，右邊的div就是我試圖做的事情。我設法讓它移動時通過只是不能讓它停止大聲笑 – user1301430

對不起，你是指頂部的div如何有一個固定的位置，當你向下滾動時不會移動？我不是跟着你的問題100％ – Epik

您是否嘗試過使用純CSS來實現這一目標？您只需簡單地使用酒店overflow:scroll;？我已經在這裏建立了一個例子小提琴：http://jsfiddle.net/7q9Fw/5/

使div的不重疊，你只是簡單地需要使用

float:left; 
clear:left;

屬性，這將設置div的分開。

來源

2012-11-09 00:48:41 Epik

謝謝你的回覆ermm不知道這是什麼即時通訊嘗試做/ /也許我解釋得很糟糕。如果你看看http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa- ud3h當你向下滾動然後停在某一點時右邊的div就是我試圖做的事情。我設法讓它移動時通過不能讓它停止哈哈 – user1301430

阻止Div滾動另一個div

回答

相關問題