jQuery/CSSの静的Divボックスの混乱？

Question

スライダダウン時に静的になるdivを作って、スライドアップします。

私のCSSは

<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> 

事業部内のコンテンツは、タイムアウト時間が到達したとき、私はスライダーダウンを取得しています、このコードで

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

である、と私はクリックしたときにスライダーが上がりますスライダを上に移動するボタン。しかし、これはページの一番上に起こっています。下のページにいるユーザは、スライダのメッセージを見ることができません。このスライダを表示する必要があります。ユーザーがページやヘッダーのフッターにいなくてもかまいません。しかし、これは必ずしも目に見える必要はありません。 の位置はに固定しますが、それは永久に修正されます。あなたが私のことを理解してくれることを願っています

Answer 1

position: fixed;に要素を設定し、topなどの属性を使用して位置を設定する必要があります。例えば

：

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

それはjQueryのを使用して、スクロールをもとに消える/見せること。

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

これは、300ピクセルを超えてスクロールするとボックスが固定されます。

Answer 2

div要素にCSSスタイル "position：fixed"を追加し、幅と高さと位置を設定するだけです。

しかし、正直言ってほとんどの人はこの種の広告を嫌います。