• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Фиксируем блок в боковой колонке с помощью JS
Фиксируем блок в боковой колонке с помощью JS
workman
Воскресенье, 03 Января 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Как-то тут видел пост в котором пользователь спрашивал,как сделать так, чтобы блоки или один блок был подвижным и вот решил поделиться данным скриптом.



Находим свой блок который вы хотели бы зафиксировать и вокруг кода добавляем тег 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 (100.9 Kb)


Сообщение отредактировал
workman - Воскресенье, 03 Января 2016, 12:13
Страна: (RU)
Kosten
Воскресенье, 03 Января 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
workman, как понимаю, в этом направление происходит фиксация.

Страна: (RU)
workman
Воскресенье, 03 Января 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
как понимаю, в этом направление происходит фиксация
Правильно понимаешь smile
Страна: (RU)
Kosten
Понедельник, 04 Января 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
workman, всегда что то новое узнаешь, реально раньше не знал.
Страна: (RU)
Сопрано
Понедельник, 04 Января 2016 | Сообщение 5
Оффлайн
Vip
Сообщений:462
Награды: 4
И сильно од будет подвижной и вообще для чего это или просто такая фишка на сайте.
Страна: (RU)
Kosten
Понедельник, 04 Января 2016 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
workman, а также можно сделать на баннер, чтоб прозрачный и при наведение нормальный был.
Страна: (RU)
workman
Понедельник, 04 Января 2016 | Сообщение 7
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Trantel ()
И сильно од будет подвижной и вообще для чего это или просто такая фишка на сайте
А разве не видел на других сайтах, как стоит менюшка, или какой-то отдельный блок с рекламой, а потом при прокрутке страницы вниз, нужный раздел объединяется в fixed
Страна: (RU)
Траст
Понедельник, 04 Января 2016 | Сообщение 8
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Подвижен, это чтовы его проходите и он просто уходит, но это не на все сайты подойдет. Но так понимаю.

Быстро, дешево и сердито!
Страна: (RU)
csretven
Понедельник, 04 Января 2016 | Сообщение 9
Оффлайн
Пользователи
Сообщений:54
Награды: 0
Это сайты вы видели, когда начинаешь в низ крутить, то блоки начинают уходить и на ихместо другая информация появляется, но хотелось верить, чтоб так было.
Страна: (RU)
Kosten
Понедельник, 04 Января 2016 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Цитата csretven ()
хотелось верить, чтоб так было

Мне вот такой дизайн или функций на сайте не нравятся, просто не понимаешь, где что находиться.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Фиксируем блок в боковой колонке с помощью JS
  • Страница 1 из 1
  • 1
Поиск: