Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Move div horizontally when scroll vertically ( jquery or CSS3)

Tags:

jquery

css

scroll

I want to move a div from left to right, when page is scroll down or up. When page scroll down it should move right and when page is scroll up it should move left.

like image 685
bigtechideas Avatar asked Aug 20 '13 10:08

bigtechideas


People also ask

How do you make a div scrollable horizontally CSS?

Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

How do I scroll horizontally in CSS?

To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.

How do I move a div horizontally?

Answer: Use the CSS margin property If you would like to center align a <div> element horizontally with respect to the parent element you can use the CSS margin property with the value auto for the left and right side, i.e. set the style rule margin: 0 auto; for the div element.

How do you make a div scrollable?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.


1 Answers

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/

like image 126
NLZ Avatar answered Sep 20 '22 12:09

NLZ