當滾動時將div移到一邊

目前我有一個頁面，其中兩個div設置在頁面的左側/右側並具有固定位置，我希望實現一種效果，即每次div在您向下滾動時都將移動到一邊，但如果您向後滾動，請移回原位。當滾動時將div移到一邊

目前我正在與工作是 -

html, body{ 
    height: 100%; 
    width: 100%; 
} 

.left{ 
    position: fixed; 

    left: 0; 
    top: 0; 

    height: 100%; 
    width: 200px; 

    background-color: #111111; 
} 

.right{ 
    position: fixed; 

    right: 0; 
    top: 0; 

    height: 100%; 
    width: 200px; 

    background-color: #111111; 
}

在HTML中，目前只有兩個div與類左/右

有一個Javascript plugin或library，我可以用它來輕鬆實現這一效果？

來源

2015-12-30 Hector X Magoogliades

我們能有一個當前的代碼？ – Hemal

我已經用我的CSS更新了我的原始帖子。 –

[skrollr]（https://github.com/Prinzhorn/skrollr）呢？看看它的演示[這裏]（https://prinzhorn.github.io/skrollr/）。 –

如果我理解你的問題就很容易。你可以使用這個小jquery：

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
    $('.left').css('left', - scroll/4); 
    $('.right').css('right', - scroll/4); 
});

基本上檢測作爲變量（滾動）當前滾動位置，你認爲值添加到您的right和left CSS值。（我分了mumber由四個這樣就減少了「滾動」增值的CSS製作「動漫」慢）

$(window).scroll(function (event) { 
 
    var scroll = $(window).scrollTop(); 
 
    $('.left').css('left', - scroll/4); 
 
    $('.right').css('right', - scroll/4); 
 
});

html, 
 
body { 
 
    height: 2000px; 
 
    width: 100%; 
 
    margin:0; 
 
} 
 

 
.left { 
 
    position: fixed; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #111111; 
 
} 
 

 
.right { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #111111; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="left"></div> 
 
<div class="right"></div>

JSFIDDLE

來源

2015-12-30 16:17:31

當滾動時將div移到一邊

回答

相關問題