Как остановить плавающий (скользящий) div в нижнем колонтитуле

Как я могу сделать скользящее меню div, которое не перемещается, пока страница не будет прокручена вниз до определенной точки

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

    //// CONFIGURATION VARIABLES:

var name    = "#sidebar";
var menu_top_limit   = 0;
var menu_top_margin  = 0;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////

$(window).scroll(function() 
{ 
 // Calculate the top offset, adding a limit
 offset = menuYloc + $(document).scrollTop() + menu_top_margin;

 // Limit the offset to 241 pixels...
 // This keeps the menu out of our header area:
 if(offset < menu_top_limit)
  offset = menu_top_limit;

 // Give it the PX for pixels:
 offset += "px";

 // Animate:
 $(name).animate({top:offset},{duration:menu_shift_duration,queue:false});
 });

У меня есть другой аналогичный код, который должен останавливаться в нижнем колонтитуле, но он не работает:

var name = "#sidebar";  
var menuYloc = null;  
var footer = '#footer'; //Specify the ID for your footer.

 $(document).ready(
    function()
    {  
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
        $(window).scroll(
            function() 
            {   
                var offset = menuYloc + $(document).scrollTop();
                var anotherOffset = offset;

                var docTop = $(window).scrollTop();
                var footerTop = $(footer).offset().top;

                var maxOffset = footerTop - $(name).height() - 20;
                var minOffset = docTop;

                offset = offset > maxOffset ? maxOffset : offset;
                offset = offset < minOffset ? minOffset : offset;

                $(name).animate({top:offset + 'px'},{duration:500,queue:false});      
            }
        );  
    }
);

javascript html jquery header floating
person Matt    schedule 14.11.2009    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если вы ищете, как сохранить нижний колонтитул внизу и прокручиваемую середину, я думаю, что сделал это, см. мой пост в блоге ниже (в разделе «На веб-странице»). Перейти к http://www.jimleo.com, чтобы увидеть его в действии.

http://jimleonardo.blogspot.com/2009/02/jimleocom-is-back-up-some-how-to.html

person Jim L    schedule 14.11.2009
comment
не совсем, Джим, но спасибо за быстрый ответ. у меня есть целенаправленно плавающее навигационное меню, поэтому пользователям не придется прокручивать вверх, но оно перекрывает нижний колонтитул, когда я добираюсь до конца. самое простое решение — уменьшить нижний колонтитул (с 300 пикселей до рекомендуемых 241 пикселей), но я достаточно упрям, чтобы попробовать это с кодом. - person Matt; 14.11.2009

arrow_upward
0
arrow_downward

Похоже, вам нужен нижний колонтитул страницы, который всегда виден. Не было бы намного проще создать два абсолютных элемента, один вверху страницы, а другой внизу. А затем добавьте весь свой контент в div со 100% шириной/высотой (это нужно сделать с помощью javascript).

Тогда вам не нужно подключать что-то к событию прокрутки тела (это никогда не выглядит очень хорошо).

Если вы добавите смещение или несколько разрывов строк до и после вашего контента, это должно работать намного лучше, чем то, что вы пытаетесь сделать.

Я сделал это с помощью здесь.

person Ben    schedule 14.11.2009
comment
Нет. у меня есть плавающее меню, как здесь: kingtray.com - person Matt; 14.11.2009