Форум

Freezoff · #1 (**permalink**) 21.01.2013, 20:53

Уважаемые ГУРУ! Подскажите как сделать боковой баннер, примерно как на «Одноклассниках»?
Т.е. баннер, который бы располагался ниже контента в боковой колонке таблицы, но при этом принимал бы верхнее стационарное положение, при прокрутке страницы вниз (когда весь контент «ушел» за границу экрана)?

ОлегА · #2 (**permalink**) 22.01.2013, 08:10

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

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

Freezoff · #3 (**permalink**) 22.01.2013, 08:31

Ну может у кого есть готовое решение? А оно наверняка есть!
В настоящее время реализовал это очень тупым способом:
После вывода контента ставлю:

<div id='banner' style='z-index:1000; position: fixed'>код виджета</div>

Однако здесь появляется две проблемы.
Во-первых если контента много то баннера либо не видно, либо видно частично.
Во-вторых если контента мало, то баннер выходит за границы таблицы.
Да и смотрится все это неважно...
Мне бы хотя бы направление подскажите в котором нужно копать?

ОлегА · #4 (**permalink**) 22.01.2013, 09:38

Во-первых если контента много то баннера либо не видно, либо видно частично. - сделать фиксированную ширину контента
Во-вторых если контента мало, то баннер выходит за границы таблицы. - сделать фиксированную ширину баннера

ksa · #5 (**permalink**) 22.01.2013, 11:52

Сообщение от Freezoff

Мне бы хотя бы направление подскажите в котором нужно копать?

Начни с тестового примера...

Deff · #6 (**permalink**) 22.01.2013, 18:31

<!DOCTYPE>
<html>
<head>
<style>
.WrapReklam {
  position:absolute;
  margin-left:100px;
  height:100%;
  border:blue solid 1px;
  padding:3px;
}
.Banner{
  position:fixed;
  display:inline-block;
  height:100px;
  width:200px;
  border:red solid 1px;
}
</style>
</head>
<body>


<div class="WrapReklam">
  <div class="Banner"></div>
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

Собственно это начало.
Для ухода за область нужен скрипт - удаляющий fixed у .Banner

Freezoff · #7 (**permalink**) 23.01.2013, 08:02

А как определить достигла нижняя часть контента верхней границы экрана или нет? Или даже не так... Достиг ли баннер верхней границы экрана?

ОлегА · #8 (**permalink**) 23.01.2013, 08:12

Freezoff, а он и не достигнет если у тебя position:fixed

Freezoff · #9 (**permalink**) 23.01.2013, 08:40

Это понятно...Алгоритм я думаю надо делать следующим образом:
Выводим сразу две копии одного и того же баннера, один делаем скрытым но фиксированным, а второй обычный.
Как только обычный банер достиг верней границы экрана, скрываем его и показываем фиксированный...
Незнаю правда можно ли в принципе это сделать?

ОлегА · #10 (**permalink**) 23.01.2013, 09:01

Freezoff, без проблем, просто, зачем так делать?)))делаешь сначала баннер обычным, а как только он достигнет верхней границы экрана делаем его fixed всего делов, поймать момент когда баннер достигнет top:0 документа, но тут встает и проблема обратного прокручивания, в какой момент баннер сделать снова обычным

Форум

Справочник

Discord чат

Курсы javascript