Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамический блок div, прошу помощи в коде JS. (https://javascript.ru/forum/dom-window/60233-dinamicheskijj-blok-div-proshu-pomoshhi-v-kode-js.html)

javamen 18.12.2015 12:08

Динамический блок 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');
 });
});



Пожалуйста помогите с оставшимся кодом ребята!
Спасибо за внимание и помощь!

рони 18.12.2015 12:18

javamen,
http://javascript.ru/forum/dom-windo...d-futerom.html

ruslan_mart 18.12.2015 12:48

Цитата:

Сообщение от javamen
if (top > 325) $('#news_content').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс
5
  else $('#news_content').removeClass('fixed');

Опять парсим и дёргаем весь документ при каждом onscroll? :)

javamen 18.12.2015 12:57

Пожалуйста, если не трудно, напишите мне полностью как будет выглядеть код для меня.
И да проблема на маленьких разрешениях, что когда этот блок доходит до низа полоса прокрутки начинает дергаться. Мне нужно исключить эту проблему.
Спасибо

javamen 18.12.2015 14:16

Вот кстати адрес сайта для примера: oda56.ru

javamen 18.12.2015 17:03

Цитата:

Сообщение от рони (Сообщение 400376)

Не получается реализовать! Сразу резко прыгает мой сайдбар:help: :help: :help: :help:

рони 18.12.2015 19:11

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'})

    })
});

javamen 18.12.2015 21:38

Спасибо тебе огромное Рони. Все заработало, только одна проблема, если на какой то из страниц достаточно высоты текста с лева в контенте (около 750 px), то все корректно отображается, если же нет, как например на странице покупка продажа недвижимости (там вообще только заголовок пока, нет текста), то сайд бар некорректно отображается, прям по верх футера и шапки сразу. Надеюсь понятно объяснил? как бы вот это исправить блин(:(

рони 19.12.2015 00:29

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'})

    })
});

javamen 19.12.2015 09:52

Огромное спасибо тебе Рони, выручил!!:thanks: :thanks:


Часовой пояс GMT +3, время: 10:45.