製作兩個div在滾動過去後粘到頁面頂部

我一直試圖在用戶滾動瀏覽這些div後讓兩個div粘貼到頁面的頂部。兩個div都位於相同的高度。這是我已經從其他計算器的答案使用的是什麼：製作兩個div在滾動過去後粘到頁面頂部

HTML：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) 
    $('#blockleft').addClass('sticky') 
    else 
    $('#blockleft').removeClass('sticky'); 
    } 
$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
    }); 
</script> 
</head> 

<body> 
<div id="header"></div> 
<div id="sticky-anchor"></div> 
<div class="container"> 
<div id="blockleft"></div> 
<div id="blockright"></div> 
<div id="content"></div> 
</div> 
</body>

的CSS：

body { 
margin: 0; 
padding: 0; 
} 
#header { 
height:200px; 
background-color:#666; 
} 
#blockleft { 
width:100px; 
height:500px; 
margin-top:10px; 
background-color:#090; 
float:left; 
} 
#blockright { 
width:100px; 
height:500px; 
margin-top:10px; 
background-color:#0F3; 
float:right; 
} 
#content { 
width:500px; 
height:2000px; 
background-color:#0CF; 
margin:auto; 
} 
.container { 
width:800px; 
margin:auto; 
} 
.sticky { 
position: fixed; 
top: 0; 
}

腳本工作正常上一個格，但使用腳本兩次它的時候自動將右側的div移動到左側，並且這個不會粘在頁面的頂部。

我一直希望有人能幫我解決這個問題。

編輯：重新創建一個新的文件

來源

2012-12-12 LittleLumber

的問題，因爲div失利他float屬性時，我們將其position:fixed，他們都相互重疊。爲了使他們在他們的位置，我們需要適用right距離的權利div。要解決這個問題，請按如下所示替換腳本代碼。

<script type="text/javascript"> 
function sticky_relocate() { 
    var containerWidth = $(".container").outerWidth(true); 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) 
    { 
    $('#blockleft').addClass('sticky'); 
    $('#blockright').addClass('sticky'); 
    $('#blockright').css("right", (containerWidth-800)/2 + "px"); 
    } 
    else 
    { 
    $('#blockleft').removeClass('sticky'); 
    $('#blockright').removeClass('sticky'); 
    } 
    } 
$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
    }); 
</script>

代碼$('#blockright').css("right", (containerWidth-800)/2 + "px");計算用於右div合適的距離值，並增加了CSS屬性right:XXXpx到div而滾動。該代碼var containerWidth = $(".container").outerWidth(true);取容器div的寬度，其margin值（因爲margin由auto，我們需要明確的數量計算）

來源

2012-12-12 08:51:21 viki

我在一個新的文件重新創建的問題，也許這個人是比較容易理解。請檢查原始帖子。 – LittleLumber

@LittleLumber：如果這有助於您解決問題，請將其標記爲答案。 – viki

製作兩個div在滾動過去後粘到頁面頂部

回答

相關問題