Question

I want to make a div which becomes static when slidedown, and goes on slideup.

My CSS is

<style type="text/css">
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }
/*#hiddenContent { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
*/</style>

The content in Div is

<div id="idletimeout">
You will be logged off in <span><!-- countdown place holder --></span>&nbsp;seconds due to inactivity. 
</div>

In this code, I am getting the slider-down when the timeout time reaches, and slider goes up when I click a button to slider to go up. But this is happening to only top of the page. so if the user in a below page, he will not be able to see the slider message. I want that this slider should be visible, no matter user is at the footer of the page or header. But this is not always needs to be visible. I can put position fixed in css, but then it will be permanently fixed. I hope you understand my point.

Answer 1

You need to set the element to be position: fixed; and then set it’s position by using attributes such as top.

For example:

.fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

To make it appear/disappear based on scrolling, use jQuery.

$(window).scroll(function() {
    if($(document).scrollTop() > 300) {
        $("#idletimeout").addClass('fixed');
    } else {
        $("#idletimeout").removeClass('fixed');
    } 
});

That will make the box fixed when you scroll over 300px.