Question

我正在使用以下代码向用户发送推送通知...

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

理想情况下，如果用户在消息出现时开始滚动，那么该元素可能会随之移动。

Answer 1

position: fixed

MDN documentation

Answer 2

如果你只需要支持现代浏览器，你可以尝试将元素的CSS位置属性设置为“fixed”。

Answer 3

尝试更改

body{
margin: 0;
}
body > .push-notification {
     position: fixed;
}

并使用相同的脚本再次尝试。

Answer 4

我认为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();
    });
}

Answer 5

是的，您需要查看使用位置：已修复支持它的浏览器，因为IE6是现在唯一使用的浏览器，不仅仅是添加

* html .push-notification {
   position: absolute;
}

AFTER 通知的原始样式规则。

如果你想要一个javascript解决方案，你可以获得文件scrollTop / bottom并计算出离屏幕底部有多远来显示它。但是如果用户滚动

，你需要一个onscroll事件来移动它

Answer 6

尝试将css更改为：

position: fixed;

位置元素位于当前窗口的右下角

6 个答案: