CSS背景滾動效果

我正在一個網站上，英雄/標題被分成兩部分，一個左側的網站與信息，右側的圖形。右側（圖像）應該有一個簡單的視差效果，所以我給了它background-attachment: fixed;。CSS背景滾動效果

現在，我應該改變background-attachment財產時，圖形的底部擊中下一節，所以圖片將向上滾動與其他文本從那時起。

這是一個小提琴，可能會使我的意圖更清晰一點。

https://jsfiddle.net/fg67ho2L/1/

有沒有辦法做到這一點，因此右側（圖像）的行爲與預期？謝謝。

來源

2017-08-02 Wesley Peeters

你需要做的是改變你的右側的height屬性，所以如果你想實現這一點，那麼它的左側就少了。

來源

2017-08-02 10:11:09

的劇本給我一個錯誤，所以我改變

var abouttop = document.getElementById("about").getBoundingClientRect().height;

然後我決定不使用background-attachment但transforms。此外，您錯過了文本容器的id="about"。我不使用JQuery所以這裏有一些工作js（對不起，因爲混亂）：

var pos = 0; 

var imageControl = function(e) { 
    var scrollposition = document.documentElement.scrollTop; 
    var abouttop = document.getElementById("about").getBoundingClientRect().height; 
    var scrollBottom = jQuery(window).scrollTop() + jQuery(window).height(); 
    var image_height = document.getElementById("image").getBoundingClientRect().height; 
    // console.log(scrollBottom); 

    if (scrollBottom < abouttop) { 
    pos = scrollposition; 
    } else if (scrollBottom > abouttop) { 
    //pos = abouttop-image_height; 
    } 
    console.log(pos); 
    document.getElementById("image").style.transform = "translateY(" + pos + "px)"; 
}; 

jQuery(window).scroll(imageControl);

來源

2017-08-02 10:26:25

CSS背景滾動效果

回答

相關問題