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

当您滚动超过 300 像素时，这将使框固定。

于 2012-05-06T12:07:21.987 回答
0

只需在 div 元素上添加 css 样式“位置：固定”，然后设置其宽度、高度和位置。

但老实说，大多数人讨厌这种广告。

于 2012-05-06T12:03:13.487 回答