Боковой баннер в постоянном поле зрения
Уважаемые ГУРУ! Подскажите как сделать боковой баннер, примерно как на «Одноклассниках»?
Т.е. баннер, который бы располагался ниже контента в боковой колонке таблицы, но при этом принимал бы верхнее стационарное положение, при прокрутке страницы вниз (когда весь контент «ушел» за границу экрана)? |
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа". Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
Ну может у кого есть готовое решение? А оно наверняка есть!
В настоящее время реализовал это очень тупым способом: После вывода контента ставлю: <div id='banner' style='z-index:1000; position: fixed'>код виджета</div> Однако здесь появляется две проблемы. Во-первых если контента много то баннера либо не видно, либо видно частично. Во-вторых если контента мало, то баннер выходит за границы таблицы. Да и смотрится все это неважно... Мне бы хотя бы направление подскажите в котором нужно копать? |
Во-первых если контента много то баннера либо не видно, либо видно частично. - сделать фиксированную ширину контента
Во-вторых если контента мало, то баннер выходит за границы таблицы. - сделать фиксированную ширину баннера |
Цитата:
|
<!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, а он и не достигнет если у тебя position:fixed
|
Это понятно...Алгоритм я думаю надо делать следующим образом:
Выводим сразу две копии одного и того же баннера, один делаем скрытым но фиксированным, а второй обычный. Как только обычный банер достиг верней границы экрана, скрываем его и показываем фиксированный... Незнаю правда можно ли в принципе это сделать? |
Freezoff, без проблем, просто, зачем так делать?)))делаешь сначала баннер обычным, а как только он достигнет верхней границы экрана делаем его fixed всего делов, поймать момент когда баннер достигнет top:0 документа, но тут встает и проблема обратного прокручивания, в какой момент баннер сделать снова обычным
|
Вот наконец-то нашел, что искал на JQuery:
<script type='text/javascript'>
$(function() {
var fixed = $("#left_fixed_div");
var offset = fixed.offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
fixed.stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
fixed.stop().animate({marginTop: 0});
};});
});
</script>
Вопрос что нужно сделать в этом скрипте, чтоб отменить эффект "плавного скольжения"? |
|
fixed тупо "пригвоздит" баннер в одном положении:nono: А надо именно, чтоб он фиксировался только при достижении верхней части экрана при прокрутки страницы вниз, и соответственно при прокрутке вверх, нужно убрать фиксацию, когда верхний контент приблизится к баннеру... В общем примерно как здесь http://www.siliconrus.com/. Вышеприведенный скрипт, как раз делает, то что мне нужно, вот только эффект плавности бы убрать... Сейчас у меня выглядет это так: http://chita.nashkray.net. Сам я в js не силен...
|
Анимацию убрал, вот код если кому интересно:
<script type="text/javascript">
$(function() {
var fixed = $("#left_fixed_div");
var offset = fixed.offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
fixed.stop().css({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
fixed.stop().css({marginTop: 0});
};});
});
</script>
Но тут появилась другая проблема. Во всех браузерах, кроме Firefox, баннер дергается при скроллинге, пока оставлю так... Но буду очень признателен если поможите избавится от этого "дергания"! |
Цитата:
|
| Часовой пояс GMT +3, время: 17:46. |