CODEWITHSUNDEEP
jqueryhtmlcss
Michael
Michael

Reputation: 4025

How do I keep a < div > 100 pixels from the top of a page, no matter where the page is scrolled to?

I'm building a website with a < div > box (chat box) that pops up whenever the website owner decides to begin a conversation with one of his visitors. The way it is now, a visitor may have scrolled several pages down before the chat box pops up, and then the chat box is hidden! How can I make it so that the chat box always pops up within the visible area of the page?

I use jQuery to poll the server, and load the box when needed.

#chatBox {
  z-index: 100;
  position: absolute;
  top: 100;
  left: 200;
  width: 400;
  height: 200;
  background-color: #8596C1;
  padding: 15px;
  border: solid 2px;
  border-color: #BDDEFF #14285F #14285F;
  display: none;
}

Thanks for your help :)

Upvotes: 0

Views: 423

Answers (3)

Srikanth Rayabhagi
Srikanth Rayabhagi

Reputation: 1443

You probably need to add one more attribute to this work on every possible page.

Along with position:fixed and top:100px you need to add z-index:99999 which will help the chat box stay on the top of the page even with some elements which already set the z-inex attributes.

Upvotes: 0

deceze
deceze

Reputation: 522567

That can be done by applying a position: fixed style.
Doesn't work in IE6 though, you'd need a Javascript fallback if you care enough.

Upvotes: 5

scragz
scragz

Reputation: 6700

.chat_container { position: fixed; top: 100px; }

Upvotes: 7

Related Questions