简体   繁体   English

垂直滚动时水平移动div(jquery或CSS3)

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

I want to move a div from left to right, when page is scroll down or up. 当页面向下或向上滚动时,我想从左向右移动div。 When page scroll down it should move right and when page is scroll up it should move left. 当页面向下滚动时,它应该向右移动,而当页面向上滚动时,它应该向左移动。

See here a little example, a red box will scroll horizontally according to the percentage of the page you scrolled vertically: 参见以下示例,一个红色框将根据您垂直滚动页面的百分比水平滚动:

$(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
        });
    });
});

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM