как сделать этот "div" всегда видимым для пользователей

Question

На моем сайте у меня есть вызов ajax на мой сервер, который проверяет, есть ли у определенного вошедшего в систему пользователя новое сообщение из базы данных. Этот сценарий ajax проверяет базу данных каждые определенные секунды. И если у него / нее есть новое сообщение Я выполняю этот JavaScript, чтобы создать «div» для отображения пользователю. Вот JavaScript:

<code>
function shownotice(b) { 
divnotice = document.createElement("div");
 var a = document.createElement("a");
a.onclick = this.close; 
a.href = "#"; 
a.setAttribute("Id", "close");
 a.className = "close";
 a.appendChild(document.createTextNode("close")); 
divnotice.appendChild(a); 
divnotice.className = "notifier"; 
divnotice.setAttribute("Id", "divnotice");
 divnotice.setAttribute("align", "center"); 
document.body.appendChild(divnotice);
 divnotice.style.top = document.body.scrollTop + "px";
 divnotice.style.left = document.body.scrollLeft + "px"; 
divnotice.style.display = "block"; 
createframe(divnotice); 
 }

И мой CSS для этого div:

<code>
div.notifier
{
padding:10px;
position:absolute;
display:none;
top:0px;
left:0px;
height:auto;
width:auto;
background-color:white;
border:1px solid black
}

Мой вопрос заключается в том, как я могу сделать этот «div» всегда видимым для пользователя, даже если он / она прокручивает вниз. Как, например, пользователь просматривает нижнюю часть страницы, он / она не может видеть «div». Другими словами, я бы хотел, чтобы "div" был виден пользователю независимо от того, где находится его / ее позиция прокрутки.

Answer 1

Вы также хотите стиль {position:fixed}. Это сделает верхний и левый столбцы относительно окна просмотра браузера.

Answer 2

Используйте это

  div.notifier {
       padding:10px;
       height:auto;
       width:auto;
       background-color:white;
       border:1px solid black
       position:fixed;
       top: /*Put the value you want here*/ ;
       left: /*Put the value you want here, if you want to put the div on the right you should use right instead of left*/ ;
   }