Некоторые изменения в stackoverflow, такие как уведомление в верхней части? - PullRequest
Новая
       1

Некоторые изменения в stackoverflow, такие как уведомление в верхней части?

0 голосов
/ 30 декабря 2011

Я следую этому руководству, чтобы показывать сообщения в верхней части окна браузера.

jQuery Уведомление, например, StackOverflow

CSS: 

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

Проблема:

Но проблема в том, что она отображается над содержимым страницы вверху, а меню моего сайта скрывается за ней.

Я хочу, чтобы отображался в верхней части содержимого веб-страницы, а когда пользователь закрывает его, содержимое страницы должно перемещаться вверх.Он также не должен двигаться, когда пользователь прокручивает страницу браузера.Так же, как stackoverflow.com.

Как мне этого добиться

Спасибо

Ответы [ 3 ]

2 голосов
/ 30 декабря 2011

Если вы хотите использовать position:fixed, чтобы сообщение оставалось при прокрутке вниз, добавьте еще один (пустой) div такой же высоты в верхней части страницы, но не размещайте его.Ваш фиксированный div будет располагаться поверх него при прокрутке страницы вверх и перемещаться при прокрутке вниз.

1 голос
/ 30 декабря 2011

Просто поместите <div> вверху вашего <body> и используйте position: static.Это значение по умолчанию, поэтому, если вы просто пропустите position, оно также будет работать.

Чтобы также разрешить прокрутку, используйте решение Гримса .Вот рабочий пример: http://jsfiddle.net/PPvG/sECk9/1/

Вы можете создать заполнитель программно, поэтому он имеет ту же высоту, что и сообщение с уведомлением: 

var placeholder = $('<div />').css('height', $('#notification').outerHeight());

При удалении уведомления вы можетеудалите заполнитель после завершения анимации, выполнив это: 

$('#notification').fadeOut("slow", function() {
    placeholder.remove();
});
1 голос
/ 30 декабря 2011

если вы разместите ваше сообщение с position:fixed, то вы измените нормальный поток.Просто поместите его над меню в html, и когда пользователь нажмет кнопку скрытия, меню займет свое место.

Демо: http://jsfiddle.net/vNpeG/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...