Стоп Div прокрутка мимо другого div

В основном у меня есть контейнер div, который содержит два div. Когда прокручивается вниз и контейнер div проходит через окно, он прилипает к верхней части экрана и следует за экраном, однако, когда я продолжаю прокручивать вниз, div внутри контейнера div перекрывают нижний колонтитул.Стоп Div прокрутка мимо другого div

Я не могу понять, как остановить нижний колонтитул от перекрытия. Я хочу, чтобы это было так, когда нижняя часть контейнера div достигла только нижней части нижнего колонтитула, но она перестает двигаться, но при прокрутке назад он следует за экраном по-прежнему. В настоящее время все, что он делает, следует за экраном вниз, когда оно проходит, и следует за ним до исходного положения.

Вот в JS для следующей части:

function sticky_relocate_2() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('.sticky-anchor').offset().top + 210; 


    if (window_top > div_top) { 
      $('#right_side_inner_container').addClass('sticky_2') 


    } else 
      $('#right_side_inner_container').removeClass('sticky_2') 

} 

google.setOnLoadCallback(function() 
{ 
    $(window).scroll(sticky_relocate_2); 
sticky_relocate(); 
});

DIV ID = right_side_inner_container того идентификатора контейнера, я хочу, чтобы двигаться и останавливаться, когда он достигает нижний колонтитул. div id = нижний колонтитул для нижнего колонтитула.

Я видел на некоторых других сайтах, что, когда он достигает определенной точки, он минует «верхний» css, поэтому каждый пиксель, прокручиваемый мимо него, продолжает вычитывать из него. Кажется, я не могу понять, как это сделать.

любая помощь будет оценена.

EDIT: пример

http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h

, если вы посмотрите на правую DIV, когда вы крутите мимо он прилипает к экрану, который я могу сделать, но когда вы держите прокрутки вниз через некоторое время он останавливается и не продолжается. Это то, что я изо всех сил пытаюсь сделать.

Когда я использую элемент контроля (хром), верхний css продолжает получать вычет.

EDIT 2: добавлены стили:

#right_side_inner_container { 
    width 300px; 
    height: 600px; 
    background: transparent; 
    text-align: center; 
    color: black; 
} 

#right_side_inner_container.sticky_2 { 
    width: 300px; 
height: 600px; 
background: transparent; 
position: fixed; 
top: 0; 
    margin-top: -8px; 
} 

#footer { 
width: 100%; 
height: 200px; 
margin: 5px 0 0 0; 
clear: both; 
background: blue; 
}

Я хочу, чтобы правый внутренний контейнер DIV, чтобы остановить только прежде чем он достигнет нижнего колонтитула DIV. Липкий класс добавляется, когда прокручивается оригинальный div, который позволяет ему следить за экраном при прокрутке.

источник

2012-11-09 user1301430

Из ваших комментариев вы сказали, что вы изменили CSS на фиксированный (предположительно вместе с другими стилями), это способ пойти ... вычесть пиксели и, как вы уже описали выше, является неэффективным методом, не могли бы вы отказать в публикации ваши стили CSS? – anson

Несомненно, я добавил CSS к сообщению – user1301430

Хорошо, ну у вас есть правильная идея. Вот сценарий быстрого решения, использующего вашу концепцию, не обращайте внимания на «пух», который я добавил, чтобы подражать вашей ситуации, просто обратите внимание на стили JS и CSS для окна fixie: http: // jsfiddle.net/z4q3v/ – anson

Вы пробовали добавить padding-bottom<body> или контейнер скроллинга div?

источник

2012-11-09 00:32:37 Neps

Да ничего не делает. когда div привязан к экрану, я добавляю к нему класс css, который делает его верхним: 0 и фиксированное положение, поэтому не знаю, будет ли отступы влиять на него. – user1301430

, если вы посмотрите на http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h div справа, когда вы прокручиваете вниз, а затем останавливается в определенном месте, это то, что я пытаюсь сделать. Мне удалось заставить его двигаться, когда его пропустили, просто не получив его, чтобы остановить lol – user1301430

извините, что вы имеете в виду div наверху, как он имеет фиксированное положение и не двигается при прокрутке вниз? Я не следую твоему вопросу 100% – Epik

Вы пробовали просто использовать чистый CSS для достижения этого? Вы можете просто использовать свойство overflow:scroll;? Я настроил пример скрипку здесь: http://jsfiddle.net/7q9Fw/5/

Так что DIV не пересекаются вам просто нужно просто использовать атрибуты в

float:left; 
clear:left;

и это установит ДИВ обособленно.

источник

2012-11-09 00:48:41 Epik

спасибо за ответ. Ermm не уверен, что то, что я пытаюсь сделать:/может быть, я объяснил это плохо. Если вы посмотрите на http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa- ud3h div справа, когда вы прокручиваете вниз, а затем останавливается в определенной точке, это то, что я пытаюсь сделать. Мне удалось заставить его двигаться, когда его передали, просто не могу заставить его остановить LOL – user1301430

Стоп Div прокрутка мимо другого div

ответ

Смежные вопросы