Фиксация/Уничтожение Div при прокрутке

Question

В основном у меня есть 4 divs (баннер, содержимое слева, правый контент и нижний колонтитул). Разделы баннера и левого содержимого фиксированы, а правильные контенты и нижние колонтитулы - нет. То, что я хотел бы иметь, - это когда верхняя часть нижнего колонтитула встречает нижнюю часть левого содержимого div, она сама деформируется и прокручивается вместе с правым div.

Я настраиваю предварительный просмотр того, что у меня есть в jsfiddle ниже.

http://jsfiddle.net/sgcer/270/

<div id="banner">BANNER</div> 
<div id="content"> 
    <div id="left">LEFT</div> 
    <div id="right">RIGHT</div> 
</div> 
<div id="footer">FOOTER</div> 

#banner { 
    float: left; 
    width: 100%; 
    height: 100px; 
    background-color: #00ff00; 
    position: fixed; 
} 
#content { 
    height: auto; 
} 
#left { 
    float: left; 
    width: 30%; 
    height: 600px; 
    background-color: #ccc; 
    position: fixed; 
    margin-top: 100px; 
} 
#right { 
    float: right; 
    width: 70%; 
    height: 750px; 
    background-color: #333; 
    margin-top: 100px; 
} 
#footer { 
    clear: both; 
    width: 100%; 
    height: 100px; 
    background-color: #ff0000; 
} 

Любая помощь будет принята с благодарностью!

Answer 1

Я раздвоенный скрипку: http://jsfiddle.net/YK72r/2/

То, что я сделал, называется if на каждом событии прокрутки, использовал немного метрик математики, чтобы найти высоту, необходимую, изменил CSS левой боковой панели, используя css метод JQuery, в а затем добавили оператор else, чтобы вернуть его при прокрутке назад.

var scrollHeight; 

$(window).ready(function() { 
    scrollHeight = $('#footer').offset().top - $('#left').height() - $('#left').offset().top; 
}); 

$(window).scroll(function() { 
    if ($(document).scrollTop() >= scrollHeight) { 
     $('#left').css({ 
      'position': 'relative', 
      'margin-top': '350px' 
     }); 
    } else { 
     $('#left').css({ 
      'position': 'fixed', 
      'margin-top': '100px' 
     }); 
    } 
}); 

Обратите внимание, что я немного изменил высоты, поэтому учитывайте значения пикселов css.

Answer 2

Вот некоторые общие шаги, чтобы сделать это:

1. Использование Javascript, чтобы получить позиции в пикселях div и колонтитула
2. Использование onscroll слушателя, слушать, когда колонтитул должен «расшатывать»
3. Когда это происходит, используйте className добавить класс "fixed" к сноске

в вашем CSS, вы должны объявления d:

.fixed { position: fixed; } 

Использование jQuery также сделает все это проще.

Надеюсь, что это поможет!

Answer 3

Попробуйте это:

$(window).scroll(function() { 
     var ftop = $("#footer").position().top; 
     var lbottom = $("#footer").position().top + $("#left").height(); 

     var scrollTop = $(window).scrollTop(); 
     var diff = ftop - scrollTop; 

     if(diff <= lbottom) 
     $("#left").css("position","static"); 
     else 
     $("#left").css("position","fixed"); 
    });