Javascript or CSS static bar which remains constant in terms of position

Question

Hi there,

I've seen so many times that some websites use a kind of button or a kind of bar which always float to a specific position like left edge of screen or at the bottom of the screen and whenever we scroll down a page it remains constant in terms of position..

How to apply this either by CSS or javascript or jquery.

Thanks in advance, Guru

Answer 1

The simplest way to achieve that effect is position: fixed

<div style="position: fixed; left: 64px; top: 64px">Hey, I'm fixed!</div>

From quirksmode.org:

An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.

only downside: Doesn't work with IE6.

Answer 2

.someclass {
  position: fixed;
  top: 33px;
  right: 55px;
}

Answer 3

JQuery:

You may find this useful for that.

CSS:

You just set position to fixed and give it top, left, bottom and right depending on where you want to make it appear, example:

<style>
#some_id
{
  position:fixed;
  top:100px;
  left:100px;
}
</style>

Now you assign that style id to the element you want to make fixed:

<div id="some_id">So, I'm FIXED :)</div>

.

Resources:

More info about CSS fixed property.

Answer 4

Also you can add the z-index property for displaying the content over other contents , it helps to display the div as a separate object displayed irrespective of the page content..

ex:

<div style="position: fixed; z-index:1000; left: 64px; top: 64px">Hey, I'm fixed!</div>

value 1000 is given to override any z-index properties of any other elements