簡體   English   中英

垂直滾動時水平移動div(jquery或CSS3)

[英]Move div horizontally when scroll vertically ( jquery or CSS3)

當頁面向下或向上滾動時,我想從左向右移動div。 當頁面向下滾動時,它應該向右移動,而當頁面向上滾動時,它應該向左移動。

參見以下示例,一個紅色框將根據您垂直滾動頁面的百分比水平滾動:

$(document).ready(function () {
    var $horizontal = $('#horizontal');

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).width() - $horizontal.width()));

        $horizontal.css({
            'left': position
        });
    });
});

工作演示: http : //jsfiddle.net/PvVdq/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM