Позиционирование DIV блока

Доброго времени суток. У меня вот такая задача связанная с позиционированием. Мне нужно сделать такую задачу как в yandex.ru после ввода вопроса в поисковик и появлении результатов поиска, при прокрутке страницы вниз блок с введенным вопросом остается на вверху.

Как позиционировать блок я знаю - position:fixsed, а чтобы div оставался на вверху страницы с отступом 10px и не прокручивался. Заранее спасибо.

4 ответа

При загрузке определяйте текущий offset().top, если страница проскроллена больше, прибавляете marginTop.

// 
var hitTop = 0;
$(document).ready(function(){
  hitTop = $('#hit').offset().top;
  $(window).scroll(function () { 
    $('#hit').stop().animate({marginTop: ($(document).scrollTop() < hitTop ? '0' : $(document).scrollTop() - hitTop)+'px'});
    // или, если нужно моментально:
    // $('#hit').css({marginTop: ($(document).scrollTop() < hitTop ? '0' : $(document).scrollTop() - hitTop)+'px'});
    });
  });

Если позиционирование абсолютное, не пользуйтесь margin-top в стилях (top: 10px; пойдет)

Перечитал впорос, возможно, вы об этом:

<!--<div style="height: 10px; margin-bottom: -10px;"></div> -->
<div id="hit" style="padding-top: 10px;">
  <div>main block</div>
</div>

Код в этом случае менять не надо.


Позиционируйте его относительно строки поиска:

<div style="position:relative">
  <div>Поиск</div>
  <div style="position:absolute; top: 30px">Подсказка</div>
</div>


Может что-то вроде этого?

<div id="header">Header</div>
    <div id="wrapper">
        <div id="page">Page</div>
        <div>Footer</div>
    </div>

Высота на #page здесь просто, чтобы не забивать контентом


$(document).ready(function(){
  $(window).scroll(function () { 
     if ($(document).scrollTop()<240){
         $('#blockMenu').removeClass("blockMenuFixed"); 
        }
    else{
     $('#blockMenu').addClass("blockMenuFixed"); 
    }
    });
  });
**CSS**
#blockMenu{
margin-left:18px;
color:#fff; 
position: relative;
}

.blockMenuFixed{
top:10px !important;
position:fixed !important;
}

licensed under cc by-sa 3.0 with attribution.