使用margin-top滾動視差

下面的內容適用於背景位置：但在嘗試在使用margin-top的不同元素上使用相同效果時不起作用：第二個元素沒有背景 - 但是div與內容。有什麼建議麼？使用margin-top滾動視差

function parallax() { 
    setpos(".filter-page"); 
    setpos(".filter"); 
// setpos(".filter", 4); 
// setpos("#pb3"); 
// setpos("#pb4"); 
} 

function setpos(element, factor) { 
    factor = factor || 2; 

    var offset = $(".filter-page").offset(); 
    var w = $(window); 

    var posx = (offset.left - w.scrollLeft())/factor; 
    var posy = (offset.top - w.scrollTop())/factor; 

    $(".filter-page").css('background-position', '10% '+posy+'px'); 
// $(".filter").css('background-position', '15% '+posy+'px'); 

    $(".filter").css('margin-top', '10% '+posy+'px'); 
} 

$(document).ready(function() { 
    parallax(); 
}).scroll(function() { 
    parallax(); 
});

來源

2015-12-29 Fred Randall

當使用

$(".filter-page").css('background-position', '10% '+posy+'px');

它意味着你在設置這些值X（10％）和Y（POSY像素）背景位置的，至極是一個有效的值（http://www.w3schools.com/cssref/pr_background-position.asp） - 因爲您可以同時設置X和Y.

但是，屬性margin-top不期望這種類型的值（http://www.w3schools.com/cssref/pr_margin-top.asp）。沒有辦法將X和X值設置爲「margin-top」。該屬性只有一個值需要設置。所以，如果你刪除10％或posy px這將工作。

來源

2015-12-29 23:37:28

謝謝，但是這不會隨着滾動增加，但？它只是改變了頁面加載的保證金，但由於背景位置確實 –

看看這個 https://jsfiddle.net/4qxmaodp/1/ 我不與垂直滾動觸發也不增量將「滾動」功能改爲「點擊」使事情變得更簡單，並創建了一個名爲「增量」的全局變量。每次你點擊圖片時，這個變量增加30，你也可以看到背景位置和邊距。也許你沒有somenthing不正確的，保證金不更新，那麼，就看看這個代碼，看看是否解決您的問題 –

謝謝，但我把它改爲滾動功能一切spazzes出來，打破 –

使用margin-top滾動視差

回答

相關問題