Скользящий Блок
#1
Отправлено 23 Март 2013 - 00:48
Подскажите пожалуйста, как проще и быстрее реализовать скользящий блок на этой платформе? Хотелось бы примерно как здесь: http://mainview.ru/d...ery-sticky-box/
Заранее спасибо
#2
Отправлено 23 Март 2013 - 05:15
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, marginLeft: leftOffset, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });
далее в файл стилей main.css вставить
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: 80px; width: 200px; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left } /* заголовок стикера*/ #sticky h5{ font-size:18px; font-weight: bold; } /* текст в самом стикере */ #sticky p{ text-align: left; padding: 5px; }
и последнее что нужно сделать, так это вставить в шаблон "HTML" или любой другой шаблон следующий код
<div id="sticky"><h5>Скользящий блок</h5> <p>Это скользящий блок. Здесь можно располагать важную информацию!</p> </div>
#3
Отправлено 23 Март 2013 - 13:55
Когда я размещаю код скользящего блока в блоке навигации по категориям:
<!-- Каталог --> <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4> <ul id="subNavigation"> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> <div id="sticky">Скользящий блок </div > <!-- end Каталог -->
то блок появляется, но когда я прокручиваю страничку вниз, он фиксируется НЕ у верхнего края экрана, а у нижнего. Прикладываю скриншот
Если код блока вставить просто в <body> то крашится верстка. Подскажите как тут лучше сделать, чтобы блок прилипал к верхнему краю экрана?
Спасибо
Забыл добавить, что фиксация происходит не самом низу экрана, а отступ от нижнего края = высоте футера. Судя по всему это как то связано с тем, что блок навигации привязан наверно к футеру, а скользящий блок нужно привязать к чему то другому.
Спасибо
#4
Отправлено 23 Март 2013 - 15:01
#5
Отправлено 24 Март 2013 - 00:52
if (scrollTop >= topOffset){ obj.css({ marginTop: -topOffset, // marginLeft: leftOffset, position: 'fixed', });
и второй момент
if (scrollTop < topOffset){ obj.css({ marginTop: 0, // marginLeft: marginLeft, position: 'relative', });
#6
Отправлено 09 Апрель 2013 - 11:02
Vaccina (23 Март 2013 - 05:15) писал:
Решил сделать скользящим main_Nav меню. Но что-то как-то непонятно он себя ведет..по сути он должен быть зафиксирован по центру, а он то влево, то вправо прыгает.
И подскажите как добавить тень к этому блоку?
http://gutauto59.ru/
#7
Отправлено 09 Апрель 2013 - 13:19
romatex (09 Апрель 2013 - 11:02) писал:
И подскажите как добавить тень к этому блоку?
http://gutauto59.ru/
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: 80px; width: 200px; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left } /* заголовок стикера*/ #sticky h5{ font-size:18px; font-weight: bold; } /* текст в самом стикере */ #sticky p{ text-align: left; padding: 5px; }и исправьте на:
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: 80px; width: 200px; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left; } #sticky h5{ font-size:18px; font-weight: bold; } #sticky p{ text-align: left; padding: 5px; }
#8
Отправлено 10 Апрель 2013 - 05:33
miyako (09 Апрель 2013 - 13:19) писал:
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: 80px; width: 200px; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left } /* заголовок стикера*/ #sticky h5{ font-size:18px; font-weight: bold; } /* текст в самом стикере */ #sticky p{ text-align: left; padding: 5px; }и исправьте на:
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: 80px; width: 200px; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left; } #sticky h5{ font-size:18px; font-weight: bold; } #sticky p{ text-align: left; padding: 5px; }
лучше от этого не стало. он все равно криво встал.
#9
Отправлено 10 Апрель 2013 - 06:22
#sticky { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #DDDDDD; border-radius: 15px 15px 15px 15px; float: left; font-size: 12px; height: 80px; margin-left: 50px; margin-top: 50px; padding: 15px; width: 200px; }
т.е удалить width
#10
Отправлено 10 Апрель 2013 - 16:34
Vaccina (10 Апрель 2013 - 06:22) писал:
#sticky { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #DDDDDD; border-radius: 15px 15px 15px 15px; float: left; font-size: 12px; height: 80px; margin-left: 50px; margin-top: 50px; padding: 15px; width: 200px; }
т.е удалить width
#11
Отправлено 10 Апрель 2013 - 18:59
romatex (10 Апрель 2013 - 16:34) писал:
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: inherit; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left; }меняем на
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: inherit; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
#12
Отправлено 11 Апрель 2013 - 06:22
Mikola (10 Апрель 2013 - 18:59) писал:
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: inherit; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float:left; }меняем на
#sticky { margin-top: 50px; margin-left: 50px; padding:15px; background: rgba(255,255,255,1); height: inherit; border:1px solid #ddd; font-size:12px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
Убрав значение float:left проблема не исчезла....только рамка расширилась. При прокрутке блок не достигая верхнего края браузера перепрыгивает в правый край со смещением вниз и как бы проходит на заднем плане остальных блоков страницы.....
#13
Отправлено 11 Апрель 2013 - 08:00
romatex (11 Апрель 2013 - 06:22) писал:
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, marginLeft: leftOffset, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });на этот :
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, // marginLeft: leftOffset, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });
#14
Отправлено 11 Апрель 2013 - 08:37
miyako (11 Апрель 2013 - 08:00) писал:
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, marginLeft: leftOffset, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });на этот :
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, // marginLeft: leftOffset, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });
Не помогло...ошибку никак не могу сам найти.....помогите!
#15
Отправлено 11 Апрель 2013 - 08:46
romatex (11 Апрель 2013 - 08:37) писал:
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, marginLeft: leftOffset-500, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });
Вам нужно подобрать значение - marginLeft: leftOffset-500
#16
Отправлено 11 Апрель 2013 - 09:54
miyako (11 Апрель 2013 - 08:46) писал:
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, marginLeft: leftOffset-500, position: 'fixed', }); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });Вам нужно подобрать значение - marginLeft: leftOffset-500
значение подобрал, но хотелось бы чтобы этот блок при прокрутке вниз не двигался до того момента, пока верхний край браузера не достигнет этого блока. И ещё на странице "Товары" этот блок как бы виден позади изображений товаров.
#17
Отправлено 11 Апрель 2013 - 09:59
romatex (11 Апрель 2013 - 09:54) писал:
$(document).ready(function(){ var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css("marginTop"); var marginLeft = obj.css("marginLeft"); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= topOffset){ obj.css({ marginTop: 0, marginLeft: leftOffset-500, position: 'fixed', z-index: 9999,}); } if (scrollTop < topOffset){ obj.css({ marginTop: marginTop, marginLeft: marginLeft, position: 'relative', }); } }); });
#18
Отправлено 11 Апрель 2013 - 10:06
if (scrollTop >= topOffset){ obj.css({ marginTop: -topOffset+50, /*например такое значение*/ marginLeft: leftOffset-500, position: 'fixed', }); } if (scrollTop < topOffset){
#19
Отправлено 11 Апрель 2013 - 10:22
miyako (11 Апрель 2013 - 10:06) писал:
if (scrollTop >= topOffset){ obj.css({ marginTop: -topOffset+50, /*например такое значение*/ marginLeft: leftOffset-500, position: 'fixed', }); } if (scrollTop < topOffset){
Получилось, но не совсем.
1)На странице "Товары" этот блок как бы виден позади изображений товаров.
2)Блок не дожидается когда верхний край браузеры сравнится с его краем. При небольшой прокрутке сразу прыгает к верхней границе браузера.
#20
Отправлено 11 Апрель 2013 - 10:41
romatex (11 Апрель 2013 - 10:22) писал:
1)На странице "Товары" этот блок как бы виден позади изображений товаров.
2)Блок не дожидается когда верхний край браузеры сравнится с его краем. При небольшой прокрутке сразу прыгает к верхней границе браузера.
по первому пункту - вы добавили свойство -
z-index: 9999?
Как в сообщении - http://forum.storela...лок/#entry58951
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных