1

スライドダウンすると静的になり、スライドアップする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の内容は

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

このコードでは、タイムアウト時間に達するとスライダーが下がり、ボタンをクリックしてスライダーが上がるとスライダーが上がります。しかし、これはページの上部でのみ発生しています。そのため、ユーザーが下のページにいる場合、スライダー メッセージは表示されません。ユーザーがページまたはヘッダーのフッターにいても、このスライダーを表示する必要があります。しかし、これは常に表示する必要があるわけではありません。cssで位置を固定できますが、永久に固定されます。私の言いたいことを理解していただければ幸いです。

4

2 に答える 2

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');
    } 
});

これにより、300px 以上スクロールするとボックスが固定されます。

于 2012-05-06T12:07:21.987 に答える
0

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

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

于 2012-05-06T12:03:13.487 に答える