Move Box/Div up or down when scrolling

Question

When I scroll up or down, I want a box/div to move up or down too.

For example:

See categories box

possible duplicate of [how can I make a div stick to the top of the screen once it's been scrolled to?](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — Eric, Mar 28 '11 at 19:50

score 1 · Answer 1 · answered May 29 '13 at 22:19

1

Also, in javascript you can do:

document.getElementById("my-box-fixed").style.position = "fixed";

answered May 29 '13 at 22:19

Asher

2,638
6
31
41

score 1 · Answer 2 · answered Mar 28 '11 at 18:52

1

This is all you need: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

answered Mar 28 '11 at 18:52

ckaufman

1,487
9
15

score 1 · Accepted Answer · answered Mar 28 '11 at 18:57

1

in your css write #my-box { position: fixed; }

it will probably move it from the center so you will have to do some math if it is a fixed width and height box like

   #my-box-fixed { 
                     position: fixed; 
                     width:200px; 
                     height: 150px; 
                     top: 50%; 
                     left: 50%; 
                     margin-left: -100px; // half of the width
                     margin-top: -75px; // half of the height
    }

answered Mar 28 '11 at 18:57

ChrisMcKenzie

367
1
3
12

Fixed position can be used only if you have a div that will stay in place (ie - Fixed to the top of the window, left side, etc.). In the example case, they are using javascript to trigger the adjustment when the window reaches a certain point. See link below... – ckaufman Mar 28 '11 at 19:20

score -1 · Answer 4 · answered Mar 16 '12 at 22:07

you can do it whit jquery:

$().ready(function () {
        var $scrollingDiv = $("#YouDivID");

        $(window).scroll(function () {
            $scrollingDiv
            .stop()
            .animate({ "marginTop": ($(window).scrollTop() + 5) + "px" }, "1000");
        });
    });

Move Box/Div up or down when scrolling

4 Answers4