Перейти к содержимому


Скользящий Блок

Автор kadi4, 23 марта 2013 00:48

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 64

#1 kadi4

kadi4

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 23 Март 2013 - 00:48

Здравствуйте, друзья.
Подскажите пожалуйста, как проще и быстрее реализовать скользящий блок на этой платформе? Хотелось бы примерно как здесь: http://mainview.ru/d...ery-sticky-box/

Заранее спасибо

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 23 Март 2013 - 05:15

Аналогично как и приведенном вами примере. Вам необходимо в разделе редактора тем - файле main.js(самом конце файла) вставить

$(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 kadi4

kadi4

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 23 Март 2013 - 13:55

Скользящий блок появился, но с ним есть несколько проблем. У меня стоит шаблон Мокко. Слева есть блок навигации по категориям товаров ( http://chipok.com )
Когда я размещаю код скользящего блока в блоке навигации по категориям:
<!-- Каталог -->
<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 kadi4

kadi4

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 23 Март 2013 - 15:01

Маленькое дополнение, зашел с другого компьютера (до этого был неетбук с 10" экраном) тут блок получается примерно посередине экрана
Изображение

#5 kadi4

kadi4

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 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 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 09 Апрель 2013 - 11:02

Просмотр сообщенияVaccina (23 Март 2013 - 05:15) писал:

Скрытый текст

Решил сделать скользящим main_Nav меню. Но что-то как-то непонятно он себя ведет..по сути он должен быть зафиксирован по центру, а он то влево, то вправо прыгает.

И подскажите как добавить тень к этому блоку?

http://gutauto59.ru/

#7 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 09 Апрель 2013 - 13:19

Просмотр сообщенияromatex (09 Апрель 2013 - 11:02) писал:

Решил сделать скользящим main_Nav меню. Но что-то как-то непонятно он себя ведет..по сути он должен быть зафиксирован по центру, а он то влево, то вправо прыгает.

И подскажите как добавить тень к этому блоку?

http://gutauto59.ru/
Найдите код в 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; }
и исправьте на:
#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 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 10 Апрель 2013 - 05:33

Просмотр сообщенияmiyako (09 Апрель 2013 - 13:19) писал:

Найдите код в 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; }
и исправьте на:
#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 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 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 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 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 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 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 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 11 Апрель 2013 - 08:00

Просмотр сообщенияromatex (11 Апрель 2013 - 06:22) писал:

Убрав значение float:left проблема не исчезла....только рамка расширилась. При прокрутке блок не достигая верхнего края браузера перепрыгивает в правый край со смещением вниз и как бы проходит на заднем плане остальных блоков страницы.....
Если вам нужно, чтобы меню не уходило в право, тогда замените в  main.js код:
$(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 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 11 Апрель 2013 - 08:37

Просмотр сообщенияmiyako (11 Апрель 2013 - 08:00) писал:

Если вам нужно, чтобы меню не уходило в право, тогда замените в main.js код: 
 $(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 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 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 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 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 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 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 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 11 Апрель 2013 - 10:06

Можно также подобрать значение верха
if (scrollTop >= topOffset){
  obj.css({
   marginTop: -topOffset+50,  /*например такое значение*/
marginLeft: leftOffset-500,
   position: 'fixed',
  });
}
if (scrollTop < topOffset){

#19 romatex

romatex

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 301 сообщений

Отправлено 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 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 11 Апрель 2013 - 10:41

Просмотр сообщенияromatex (11 Апрель 2013 - 10:22) писал:

Получилось, но не совсем.
1)На странице "Товары" этот блок как бы виден позади изображений товаров.
2)Блок не дожидается когда верхний край браузеры сравнится с его краем. При небольшой прокрутке сразу прыгает к верхней границе браузера.

по первому пункту - вы добавили свойство - 
z-index: 9999
?
Как в сообщении - http://forum.storela...лок/#entry58951
Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Изменение общей стилистики
  6. Privacy Policy