Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Стили (CSS) » Как реализовать плавающий блок в сайтбаре?

Как реализовать плавающий блок в сайтбаре?

baseroad 12.11.2015 Стили (CSS), jQuery 1225

вопрос

Здравствуйте. Подскажите, как можно реализовать плавающий блок на сайте? Чтобы при скролинге, блок опускался вниз и вверх.

Ответа пока нет

5 комментариев

Юзер

300

misha-koder - 2015-08-1913 ноября 2015 06:09 - #50134

position: fixed;

Юзер

326

baseroad - 2015-08-1914 ноября 2015 12:20 - #50186

Почему-то не помогло

Юзер

124

mastodontoff - 2015-08-1914 ноября 2015 14:52 - #50190

sticky-kit

Юзер

326

baseroad - 2015-08-1914 ноября 2015 15:06 - #50191

Можете подсказать как там устанавливаеться, а то я нечего не понял с сайта...))))

Юзер

124

mastodontoff - 2015-08-1914 ноября 2015 15:15 - #50192

Можно проще,
для наглядности вот тут нарисовал http://jsfiddle.net/njou90f3/

Просто добавляете в main.tp и куда вам больше нравится скрипт, главное чтобы он подгрузился у вас на странице


<script type="text/javascript">
$(function() {
     var offset = $("#fixed").offset();
     var topPadding = 150, //отступ сверху
         bottomPadding = 370; //высота над которой остоновится
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#fixed").stop().animate({
                 marginTop: 0
             });
         };
     });
 });
</script>

А блок который вы желаете, чтобы двигался ставите между

<div id="fixed">.....</div>

AlexeySawyer | Почему не срабатывает редирект на страни ... ²

AlexeySawyer
Почему не срабатывает редирект на страницу 404?
Сегодня, 15:05

Для просмотра содержимого спойлера, перейдите к выбранному событию.
Flash | Почему не срабатывает редирект на страни ... ²

Flash
Почему не срабатывает редирект на страницу 404?
Сегодня, 14:18

Какой .htaccess ?
cyperdark | Страница скачивания для новости ¹

cyperdark
Страница скачивания для новости
Сегодня, 11:21

Заказ выполнен.
Colonizator | Вывод доп.поля как сделать? ³
Colonizator
Вывод доп.поля как сделать?
Вчера, 15:35
В блоке где выводится информация что-то вроде такого добавить
```
<div class="[ifxfvalue update_news="Работает"]work[/ifxfvalue] [ifxfvalue update_news="Не работает"]no_work[/ifxfvalue]"> 
[xfvalue_update_news]<br>
[ifxfvalue update_news="Работает"][/ifxfvalue]
[ifxfvalue update_news="Не работает"]{date=d.m.Y}[/ifxfvalue]
</div>
```
ну и уже классам work и no_work - любые стили прописывайте
Colonizator | Выпадающий календарь в дополнительном по ... ³

Colonizator
Выпадающий календарь в дополнительном поле, как сменить язык ?
Вчера, 15:31

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#locale нужноподключить нужную локализацию а именно русскую и подключить ее в option
deadluk | Как в userinfo вывести публикации, котор ... ¹

deadluk
Как в userinfo вывести публикации, которые пользователь добавил в закладки?
Вчера, 10:27

https://dle-faq.ru/faq/questhacks/8083-vyvod-zakladok-v-profil-polzovatelya.html или через тег custom
MAXIM23 | Как организовать вывод картинок после вы ... ⁶

MAXIM23
Как организовать вывод картинок после выбора его номера ajax?
13-10-2018, 21:33

Спасибо, попробую!

Flash | Как организовать вывод картинок после вы ... ⁶

Flash
Как организовать вывод картинок после выбора его номера ajax?
13-10-2018, 18:21

Можно так


<script type="text/javascript">
function changeImg(image, number){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
  var numberbox = document.getElementById("number_box");
  numberbox.innerHTML = "Выбран номер " + number;
}
</script>

<div>
	<ul>
		<li><a href="javascript:" onclick="changeImg('/uploads/images/one.jpg', 1);">1</a></li>
		<li><a href="javascript:" onclick="changeImg('/uploads/images/two.jpg', 2)">2</a></li>
		<li><a href="javascript:" onclick="changeImg('/uploads/images/three.jpg', 3)">3</a></li>
	</ul>
</div>
<div class="imageholder"><img id="imageHolder" /></div>
<div id="number_box"></div>

newdancer | Подскажите как вывести стандартный alert ... ²

newdancer
Подскажите как вывести стандартный alert как в админке дле 12 и выше?
13-10-2018, 17:52

lutskboy, если вызывать в админке через script?
MAXIM23 | Как организовать вывод картинок после вы ... ⁶

MAXIM23
Как организовать вывод картинок после выбора его номера ajax?
13-10-2018, 12:42

Не обязательно. Просто адреса будут картинок, они может быть и на радикал залиты.

наверх

Как реализовать плавающий блок в сайтбаре?

Ответа пока нет

5 комментариев

Похожие вопросы

Плавающий блок на сайте

расположение блоков div

Блок с рекламой на плеере

Модификация спойлера

Нужно встроить простой блок в шаблон сайта

зафиксировать рекламу справа.

Как опустить контент

Рекламный блок и AdBlock

Как правильно установить стиль, чтоб не обрезало блок?

Как сделать такой блок на css?