Изменение положения div в зависимости от прокрутки страницы

Question

У меня есть следующий код, который меняет позицию div на фиксированную, если элемент scrollTop больше числа. Я пытаюсь либо изменить этот скрипт, либо найти другое решение, чтобы div в какой-то момент прокручивал диапазон и прокручивал STOP (чтобы div не уходил со страницы и не перекрывался с элементами нижнего колонтитула.

Я не знаю, правильно ли сказать, что IF scrollTop больше 150, чем position = fixed, а если больше 600, то позиция возвращается к абсолютной или, если есть лучший способ, например расстояние от дно ...

И я использую MooTools, а не jQuery. Я знаю, что есть несколько опций / плагинов jQuery, которые делают это. Заранее спасибо!

window.onscroll = function()
{
    if( window.XMLHttpRequest ) { // IE 6 doesnt implement position fixed nicely...     
        if (document.documentElement.scrollTop > 150) {
            $('tabber').style.position = 'fixed';
            $('tabber').style.top = '0';

        } else {

            $('tabber').style.position = 'absolute'; 
            $('tabber').style.top = 'auto';


        }
    }
}

Answer 1

приведенный выше сценарий неверен на многих уровнях.

не использует window.onscroll, но window.addEvent("scroll", function() {});

селекторы кэша.использование $("tabber") 3 раза на каждом свитке, когда элемент не изменяется, стоит дорого.

просто сделайте var tabber = $("tabber") и укажите на это.

вам не нужно делать

$("tabber").style.position  = ... 
$("tabber").style.top  = ... 

do:

tabber.setStyles({
    position: "fixed",
    top: 12123,
    right: 24
});

Для этого есть плагины для mootools, например, scrollSpy от David Walsh: http://davidwalsh.name/mootools-scrollspy

позволяет устанавливать сценарии при достижении различной прокруткипункты назначения или события, посмотрите на примеры.

или вы можете просто написать это самостоятельно, например, это заняло у меня 15 минут: http://jsfiddle.net/dimitar/u9J2X/ (смотреть http://jsfiddle.net/dimitar/u9J2X/show/) - это останавливаетсяфиксируется, когда он достигает 20 пикселей нижнего колонтитула, а затем возвращается к фиксированному при повторной прокрутке вверх.