CODEWITHSUNDEEP
css
Chankey Pathak
Chankey Pathak

Reputation: 21676

How to move a widget as visitor scrolls down to the post?

I have a post-share widget on my wordpress blog. 

.post-share {
    width: 80px; padding: 10px 0px; padding-bottom: 0; background: #ffffff; border: 1px solid #CCC;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    position: absolute;
    top: 680px;
    left: auto;
    z-index: 99;
    margin-left: -120px;
}

Check this page (http://www.linuxstall.com/linux-file-permissions-chmod/). The position is absolute. So when visitor scrolls down to the page it disappears. When I change position to 'fixed`. The user has to turn on 'full screen' on his browser to see the complete widget (actually the widget is long). I want it to be absolute but I want that it should move down as the visitor scroll downs the page. How can I do it?

Upvotes: 0

Views: 569

Answers (1)

oezi
oezi

Reputation: 51817

the "easy" way would be to change you css just a bit. just replace

position: absolute;
top: 680px;

with

positiion: fixed;
bottom: 10px;

wich will make your widget fully visible (until the user runs at 640x480) at the bottom of the screen and stay at position while the user scrolls down.

if you want the widget to be only half-visible when opening the site but stay visible at top of the viewport when the users starts scrolling, you'll need some javascript (wich, in my opinion, should be avoided if possible).

Upvotes: 1

Related Questions