Image / Logo that scrolls down when the User scrolls?

Question

I dont know how to phrase this question correctly, I would like to create something like the logo on the upper right corner of this website: http://www.afterthecircle.com/

When the user scrolls down, the logo moves with the scrolling movement and always stays visible to the user.

Any suggestions?

http://stackoverflow.com/questions/6691558/how-do-i-make-a-div-follow-me-as-i-scroll-down-the-page — jonosma, Jul 01 '13 at 20:24

score 3 · Answer 1 · answered Jul 01 '13 at 20:24

3

Use position: fixed along with top or bottom and left or right:

.logo {
    position: fixed;
    bottom: 1em;
    right: 1em;
}

answered Jul 01 '13 at 20:24

Fenton

241,084
71
387
401

score 3 · Answer 2 · answered Jul 01 '13 at 20:26

As brbcoding said, you are looking for the CSS property position with the value fixed. With the properties top, bottom, left, and right, you can then position the element. An example:

CSS

.fixedElement {
    position: fixed;
    top: 100px;
    left: 100px;
}

HTML

<div class=fixedElement>Hey!</div>

score 2 · Accepted Answer · answered Jul 01 '13 at 20:27

2

Fixed positioning will allow you to scroll and keep an item in it's original position.

#fixed-thing {
    position: fixed;
    top: 0;
    right: 0;
}

DEMO

answered Jul 01 '13 at 20:27

brbcoding

13,378
2
37
51

Image / Logo that scrolls down when the User scrolls?

3 Answers3