0

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

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

4 ответа 4

2

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

// <div id="hit"></div>
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>

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

5
  • На счет 2го кода, это ты так сразу задаешь верхний отступ, а необходимо чтобы когда мы начинаем прокручивать страницу вниз, при достижения верхней границы ДИВ не скрывался оставался на месте а страница прокручивалась. при обратном чтобы становилась на место
    – murad30
    19 дек 2011 в 11:14
  • Замените в $(document).ready первую строку hitTop = $('#hit').offset().top-10; // =) все просто) Все стили тогда можно убрать (margin, padding). Будет работать для любого дива, но указать надо position: absolute;, иначе вся страница прокручиваться будет.
    – Sh4dow
    19 дек 2011 в 11:41
  • Собственно, demo =)
    – Sh4dow
    19 дек 2011 в 11:52
  • Вот решил проблему, спасибо всем кто принял участие в решении задачи
    – murad30
    19 дек 2011 в 12:25
  • Я исходил из того, что 1) fixed - не кроссбраузерно, 2) скрипт выше универсален (можно доработать под класс). А так, конечно, в большинстве браузеров это тоже будет работать.
    – Sh4dow
    19 дек 2011 в 12:26
0

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

<div style="position:relative">
  <div>Поиск</div>
  <div style = "position:absolute; top: 30px">Подсказка</div>
</div>
1
  • Это не то, если блок находится ниже 30px то получается если я пропишу 30px, блок отобразится не в нужном положении, а мне нужно чтобы при прокрутке страницы вниз когда верхняя граница достигает ДИВА чтобы при прокрутке блок оставался на месте а страница прокручивалась
    – murad30
    18 дек 2011 в 19:49
0

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <style>
      body{padding:0;margin:0;}
      #header{background:#f00;position:fixed;height:30px;width:100%;}
      #wrapper{padding-top:30px;}
      #page{background:#eee;height:1000px;}
   </style>
</head>
<body>
    <div id="header">Header</div>
    <div id="wrapper">
        <div id="page">Page</div>
        <div>Footer</div>
    </div>
</body>
</html>

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

0
$(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;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.