4 Replies Latest reply: Jul 22, 2014 5:01 PM by Nancy O.

Static Side Tab

Max Resnikoff Jul 22, 2014 4:23 PM

Hi,

How would I code a image which sticks to the middle right side of the screen even when people scroll down?

I want to have what many websites have nowadays, which they usually have as a support tab which follows the user when they scroll.

I don't want it to interrupt the main page layout, is there a way to have it on its own layer so to speak?

Thank you!

1. Re: Static Side Tab

MurraySummers Jul 22, 2014 4:25 PM (in response to Max Resnikoff)

Put it in a div container and use position:fixed on the container with appropriate top and left values to place it where you want.
Like Show 0 Likes (0)

Actions
2. Re: Static Side Tab

Max Resnikoff Jul 22, 2014 4:29 PM (in response to MurraySummers)

But where?
I dont want to disturb the Main Layout of the page.
Like Show 0 Likes (0)

Actions
3. Re: Static Side Tab

MurraySummers Jul 22, 2014 4:46 PM (in response to Max Resnikoff)

Put it anywhere. The CSS position style removed the positioned element from the normal flow, so making an element absolute or fixed position with not disturb the location of any other element. Nor will any other element displace the absolute/fixed positioned element.
Like Show 0 Likes (0)

Actions
4. Re: Static Side Tab

Nancy O. Jul 22, 2014 5:01 PM (in response to MurraySummers)

Except that on smaller displays, the position:fixed element may overlap the main content which could be a problem. See example with position:fixed menu on the left.
jQuery Smooth Scrolling with Fixed Layout

Nancy O.
Like Show 0 Likes (0)

Actions