CODEWITHSUNDEEP
javascriptcss
ptamzz
ptamzz

Reputation: 9355

How to position a div so that it always appear 100px from top of the visible display

I've a stream of updates just like a twitter stream.

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>
<div id="pop-up"></div>

And the CSS

#pop-up {
    position: absolute;
    top: 125px;
    left: center;
    margin-left: -200px;
    width: 960px;
    min-height: 400px;
    z-index: 100;
}

When I click on the list-item, the div#pop-up will pop up as an overlay and content will be dynamically generated inside it.

How do I position the pop-up in such a way that it pops up in a 'fixed' position inside the screen??

I can not just write position: fixed as, if the content is long, then I've to be able to scroll down. And I can not write position: absolute as the list items is long and if I scroll down at the bottom and click on the last item of the list, the pop-up appears 150px from top and I've to scroll up?

Upvotes: 0

Views: 1110

Answers (3)

Litek
Litek

Reputation: 4888

Use $(window).scrollTop() to get number of scrolled pixels and add 150 to it - that gives you top value of your absolutely positioned popup. Fiddle.

Upvotes: 1

Semyazas
Semyazas

Reputation: 2101

$('#pop-up').hover(function(){
$(this).css('position','absolute');
},function(){
$(this).css('position','fixed');
});

That way, it is scrollable, once you enter and is running with the page, when you're outside

Upvotes: 1

Adrian van Vliet
Adrian van Vliet

Reputation: 1521

the list items is long and if I scroll down at the bottom and click on the last item of the list, the pop-up appears 150px from top and I've to scroll up?

To avoid this problem, you'll always have to stick with a position:fixed div. To make it scrollable, just add a quick overflow: scroll :) Easy as pie.

Upvotes: 2

Related Questions