Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Фиксируем блок в боковой колонке с помощью JS
Фиксируем блок в боковой колонке с помощью JS
workman
Дата: Воскресенье, 03.01.2016, 12:05 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


Как-то тут видел пост в котором пользователь спрашивал,как сделать так, чтобы блоки или один блок был подвижным и вот решил поделиться данным скриптом.



Находим свой блок который вы хотели бы зафиксировать и вокруг кода добавляем тег div вот так:
Код
<div id="fixblock">тут должен быть ваш код нужного вам блока</div>

Чтобы дальше в скрипте идентифицировать блок, ему установлен атрибут id со значением fixblock.

Теперь нужно добавить код скрипта, который будет фиксировать блок на странице при прокрутке.
Для этого копируем код ниже (помним про значение id) и добавляем его перед закрывающим тегом
Код
<script type="text/javascript">
function getTopOffset(e) {
    var y = 0;
    do { y += e.offsetTop; } while (e = e.offsetParent);
    return y;
}
var block = document.getElementById('fixblock');
if ( null != block ) {
    var topPos = getTopOffset( block );
    window.onscroll = function() {
  var newcss = (topPos < window.pageYOffset) ?
   'top:20px; position: fixed;' : 'position:static;';
  block.setAttribute( 'style', newcss );
    }
}
</script>

Сохраняем и проверяем как все работает.
Прошу прощения, но ДЕМО нет, так как не имею тестового сайта, но уверяю вас что данный код будет работать как часы.
Всем удачи в сайтостроении
Прикрепления: 0719529.png(101Kb)


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...

Сообщение отредактировал workman - Воскресенье, 03.01.2016, 12:13
Kosten
Дата: Воскресенье, 03.01.2016, 17:31 | Сообщение # 2
Администраторы
Сообщений:12672
Награды: 39


workman, как понимаю, в этом направление происходит фиксация.



workman
Дата: Воскресенье, 03.01.2016, 18:13 | Сообщение # 3
Vip
Сообщений:1576
Награды: 7


Цитата Kosten ()
как понимаю, в этом направление происходит фиксация
Правильно понимаешь smile


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Понедельник, 04.01.2016, 00:30 | Сообщение # 4
Администраторы
Сообщений:12672
Награды: 39


workman, всегда что то новое узнаешь, реально раньше не знал.

Сопрано
Дата: Понедельник, 04.01.2016, 00:43 | Сообщение # 5
Пользователи
Сообщений:265
Награды: 2


И сильно од будет подвижной и вообще для чего это или просто такая фишка на сайте.
Kosten
Дата: Понедельник, 04.01.2016, 00:51 | Сообщение # 6
Администраторы
Сообщений:12672
Награды: 39


workman, а также можно сделать на баннер, чтоб прозрачный и при наведение нормальный был.

workman
Дата: Понедельник, 04.01.2016, 00:52 | Сообщение # 7
Vip
Сообщений:1576
Награды: 7


Цитата Trantel ()
И сильно од будет подвижной и вообще для чего это или просто такая фишка на сайте
А разве не видел на других сайтах, как стоит менюшка, или какой-то отдельный блок с рекламой, а потом при прокрутке страницы вниз, нужный раздел объединяется в fixed


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Траст
Дата: Понедельник, 04.01.2016, 01:14 | Сообщение # 8
Пользователи
Сообщений:92
Награды: 0


Подвижен, это чтовы его проходите и он просто уходит, но это не на все сайты подойдет. Но так понимаю.

Быстро, дешево и сердито!
csretven
Дата: Понедельник, 04.01.2016, 01:31 | Сообщение # 9
Пользователи
Сообщений:46
Награды: 0


Это сайты вы видели, когда начинаешь в низ крутить, то блоки начинают уходить и на ихместо другая информация появляется, но хотелось верить, чтоб так было.
Kosten
Дата: Понедельник, 04.01.2016, 01:48 | Сообщение # 10
Администраторы
Сообщений:12672
Награды: 39


Цитата csretven ()
хотелось верить, чтоб так было

Мне вот такой дизайн или функций на сайте не нравятся, просто не понимаешь, где что находиться.


Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Фиксируем блок в боковой колонке с помощью JS
Страница 1 из 11
Поиск: