CODEWITHSUNDEEP
javascriptjquerycsswordpresswidget
user1048676
user1048676

Reputation: 10066

Creating a Floating Widget that moves as the page scrolls

All, I'm using Wordpress widgets but I'd like to create a widget that floats down with the page as your scroll. Has anyone ever done anything like this? If so, can you give any recommendations on how to achieve such a widget? Is it done merely by Javascript/CSS?

Thanks!

Upvotes: 4

Views: 15561

Answers (4)

Max Bond
Max Bond

Reputation: 41

The easiest way - to install this new WordPress plugin - Q2W3 Fixed Widget

It was specifically designed for this purpose!

Screenshots

Upvotes: 4

Kamil Kiedrowski
Kamil Kiedrowski

Reputation: 26

slashnick's and maxedison's solutions will work.

If you'd like to have a dynamic scrolling box that doesn't always stay on the screen or minds the header, footer or any other div of your site, you might want to check out DropTheBit's sticky float jQuery plugin: http://dropthebit.com/74/sticky-floating-box/

Upvotes: 1

slashnick
slashnick

Reputation: 26549

You need to give the widget a style of position:fixed;. Example at W3Schools.

Upvotes: 2

maxedison
maxedison

Reputation: 17573

All you need to do is set the position of the element in question to fixed via CSS, i.e.

.myFloatingWidget {position:fixed; left:0px; top:50%}

Upvotes: 3

Related Questions