我正在使用以下代码向用户发送推送通知...
document.triggerNotification = function (type, message) {
jQuery(document.body).append("<div class='push-notification hide push-"+type+"' id='notification'>"+message+"</div>");
jQuery('#notification').show().fadeOut(1200, function () {
jQuery('#notification').remove();
});
}
问题是该元素未显示在我的屏幕当前放置位置的右下角,它显示在页面最初加载的位置的右下角。我正在使用以下CSS:
.push-notification {
background-color: #000;
position: absolute;
right: 20px;
bottom: 20px;
color: #fff;
padding: 15px 15px 15px 30px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-repeat: no-repeat;
background-position: 7px center;
opacity: 0.7;
filter: alpha(opacity=70);
vertical-align: middle;
box-shadow: 4px 4px 4px #000;
-webkit-box-shadow: 4px 4px 4px #000;
-moz-box-shadow: 4px 4px 4px #000;
}
.push-check {
background-image: url(/image/icons/accept.png);
}
.push-x {
background-image: url(/image/icons/accept.png);
}
理想情况下,如果用户在消息出现时开始滚动,那么该元素可能会随之移动。
答案 0 :(得分:5)
position: fixed
答案 1 :(得分:1)
如果你只需要支持现代浏览器,你可以尝试将元素的CSS位置属性设置为“fixed”。
答案 2 :(得分:0)
尝试更改
body{
margin: 0;
}
body > .push-notification {
position: fixed;
}
并使用相同的脚本再次尝试。
答案 3 :(得分:0)
我认为jQuery无法读取外部样式表,所以你必须给div一个样式属性,或者用jQuery改变它:
document.triggerNotification = function (type, message) {
jQuery(document.body).append("<div class='push-notification hide push-"+type+"' id='notification'>"+message+"</div>");
jQuery('#notification').css({
right: '20px',
bottom: '20px'
}).show().fadeOut(1200, function () {
jQuery(this).remove();
});
}
答案 4 :(得分:0)
是的,您需要查看使用位置:已修复支持它的浏览器,因为IE6是现在唯一使用的浏览器,不仅仅是添加
* html .push-notification { position: absolute; }
AFTER 通知的原始样式规则。
如果你想要一个javascript解决方案,你可以获得文件scrollTop / bottom并计算出离屏幕底部有多远来显示它。但是如果用户滚动
,你需要一个onscroll事件来移动它答案 5 :(得分:0)
尝试将css更改为:
position: fixed;