Динамический блок div, прошу помощи в коде JS.
Доброго времени суток. Сможет ли мне кто то помочь с кодом:
Есть див блок который прилипает при прокрутке экрана к верху страницы. Так вот нужно добавить функцию, что бы при прокрутке до другого див блока расположенного горизонтально (футера) он останавливался. Находил на просторах интернета скрипты но не пулучается у меня их реализовать. Пожалуйста помогите новичку. Вот структура сайта: http://hostingkartinok.com/show-imag...999078d311d324 Вот часть кода которая есть у меня: она позволяет прилипать данному блоку при прокрутке вниз, но уходит за футер не останавливаясь. $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 325) $('#news_content').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс else $('#news_content').removeClass('fixed'); }); }); Пожалуйста помогите с оставшимся кодом ребята! Спасибо за внимание и помощь! |
|
Цитата:
|
Пожалуйста, если не трудно, напишите мне полностью как будет выглядеть код для меня.
И да проблема на маленьких разрешениях, что когда этот блок доходит до низа полоса прокрутки начинает дергаться. Мне нужно исключить эту проблему. Спасибо |
Вот кстати адрес сайта для примера: oda56.ru
|
Цитата:
|
javamen,
замените весь ваш код на этот $(function () { var a = $("#news_content,#otsivi_content"); a.css({position:'fixed'}); var c = a.offset(), d = Math.max($(a[0]).outerHeight(!0), $(a[1]).outerHeight(!0)), e = $("#contant_bottom").offset(); $(window).scroll(function () { var b = $(this).scrollTop(); if(c.top > b && b < e.top - d) a.css({top : (c.top - b - 135)+'px' }) else if (b < e.top - d + 135) a.css({top: '-135px'}) else a.css({top: (e.top - d - b) +'px'}) }) }); |
Спасибо тебе огромное Рони. Все заработало, только одна проблема, если на какой то из страниц достаточно высоты текста с лева в контенте (около 750 px), то все корректно отображается, если же нет, как например на странице покупка продажа недвижимости (там вообще только заголовок пока, нет текста), то сайд бар некорректно отображается, прям по верх футера и шапки сразу. Надеюсь понятно объяснил? как бы вот это исправить блин(:(
|
javamen,
css html js учить ... или раздел работа $(function () { var a = $("#news_content,#otsivi_content"); var c = a.offset(), marginTop = parseFloat(a.css('marginTop'))||0, d = Math.max($(a[0]).outerHeight(!0), $(a[1]).outerHeight(!0)), e = $("#contant_bottom").parents('tr').offset(); if(c.top+d + 10 >= e.top+marginTop ) return; a.css({position:'fixed'}); $(window).scroll(function () { var b = $(this).scrollTop(); if(c.top > b && b < e.top - d) a.css({top : (c.top - b - marginTop)+'px' }) else if (b < e.top - d + marginTop) a.css({top: -marginTop +'px'}) else a.css({top: (e.top - d - b) +'px'}) }) }); |
Огромное спасибо тебе Рони, выручил!!:thanks: :thanks:
|
Часовой пояс GMT +3, время: 10:45. |