Как я могу отобразить панель «впервые здесь», как SO, и сдвинуть другие DIV вниз? - PullRequest
Новая
       3

Как я могу отобразить панель «впервые здесь», как SO, и сдвинуть другие DIV вниз?

6 голосов
/ 05 мая 2010

Я реализовал код для отображения панели вверху экрана stackoverflow: Как показать всплывающее сообщение, как в stackoverflow

То, что это делает, это отображает div поверх div в верхней части страницы. Как я могу отобразить новый "бар" div и толкнуть остальных вниз? Точно так же, как StackOverflow.

Ответы [ 4 ]

2 голосов
/ 05 мая 2010

Не используйте свойство «position: fixed» в css, попробуйте «absolute» из: http://www.w3schools.com/css/pr_class_position.asp

Фиксированная позиция относительно вашего "окна просмотра" (окно браузера).

Абсолютная позиция относительно вашего HTML-документа.

1 голос
/ 18 мая 2010

Редактировать: Непосредственной реакцией на мой код ниже будет отказ от использования тега div#removeme и предоставление margin-bottom. Однако, если вы используете position:fixed, это не сработает, поскольку оно прикрепляется к окну, а не к документу.

Вот что я делаю:

В моем HTML-документе: 

<div id="removeme">
    <br /><br />
</div>

<div id="header"> This is a floating pane! </div>
<div id="content"> Your content goes here... </div>

CSS для этой плавающей панели: 

 #header {
   position: fixed;
   top: 0px;
   left: 0px;
   text-align: center;
   background-color: #FFE6BF;
   height: 30px;
   border: 1px solid #FFCFA6;
   width: 100%;
  }

А затем используйте jquery в теге <head>: 

$(document).ready(function() {
 $('#header').click(function() {
  $('#header').slideUp('fast');
  $('#removeme').remove();
 });
});

У меня есть дополнительный тег <div> с идентификатором removeme, который позволяет толкать содержимое вниз, когда плавающая панель видна, и я удаляю его, когда плавающая панель скрыта.

0 голосов
/ 18 мая 2010

вы бы установили свойство css для бара в положение "fixed" затем создайте div "padding", чтобы заполнить высоту верхней панели. Еще один div под этим padding div. И там у вас это есть, остальная часть вашей страницы будет прокручиваться, но ваша панель будет придерживаться наверху. Если вы хотите, чтобы все перемещалось вверх и вниз с вашей панелью, используйте slideUp как для div с фиксированной позицией, так и для заполнения. Они оба исчезнут, а остальная часть страницы прокрутится вверх. И наоборот, если вы хотите отобразить верхнюю панель.

0 голосов
/ 10 мая 2010

Не зная всей структуры вашего html, самое простое - установить на полях страницы высоту вашего сообщения div, толкая содержимое страницы вниз. Тогда вы должны сдвинуть его обратно вверх. Я сделал это как обратный вызов, который происходит после затухания, но если это кажется слишком нервным, вы можете сделать это до затухания. 

$(document).ready(function() {
    $("#message").fadeIn("slow",
        function() {
            $('body').css('margin-top', $(this).height());
        }
    );
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow",
            function() {
                $('body').css('margin-top', 0);
            }
        );
        return false;
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...