Плавающее меню, чтобы остановить, прежде чем оно достигнет нижней части страницы

Question

У меня есть плавающее меню (абсолютно позиционированное), которое остается на виду, когда пользователь прокручивает страницу вниз, проблема в том, что у меня довольно большой нижний колонтитул, и если вы прокрутите весь путь до нижней части страницы, он столкнется с нижний колонтитул.

Я просто хочу, чтобы это прекратилось, скажем, 400 пикселей внизу страницы .. Кто-нибудь знает, можно ли это сделать?

Вот код:

var name = "#about";  
var menuYloc = null;  

 $(document).ready(function(){  
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
     $(window).scroll(function () {   
         var offset = menuYloc+$(document).scrollTop()+"px";  
         $(name).animate({top:offset},{duration:500,queue:false});  
     });  
 }); 

Заранее спасибо!

Ryan

Answer 1

Нужно рассчитать, сколько «нижнего колонтитула» видно, а затем расположить #about выше нижнего колонтитула, чтобы он не скрывал его. Я думаю, что следующий код должен добиться цели:

var name = "#about";  
var menuYloc = null;  
var footer = '#yourFooterId'; //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});      
            }
        );  
    }
);

РЕДАКТИРОВАТЬ 1:

Исправлена ​​ошибка в приведенном выше коде. Это должно работать сейчас.

РЕДАКТИРОВАТЬ 2:

Обновлен демонстрационный код, он должен работать во всех браузерах. [Ранее в демонстрационном коде был вызов 'console.log', который может не работать, если вы не используете Firefox]

РЕДАКТИРОВАТЬ 3:

Убедиться, что плавающее меню всегда видно, вычислив минимальное смещение.

Проверьте демонстрацию & rarr;

Код демонстрационной страницы

Вот как выглядит демо:

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

Answer 2

Попробуйте что-то вроде этого (не проверено):

var name = "#about";  
var menuYloc = null;  

$(document).ready(function(){
    var menu = $(name);
    menuYloc = parseInt(menu.css("top").substring(0,menu.css("top").indexOf("px")));
    var height = parseInt( menu.attr( 'offsetHeight' ) + ( parseInt( menu.css( 'marginTop' ) ) || 0 ) + ( parseInt( menu.css( 'marginBottom' ) ) || 0 ) );
    var footerYLoc = $('#footer').offset().top;
    $(window).scroll(function () {   
        var offset = menuYloc+$(document).scrollTop();
        if ( (offset + height) >= footerYloc) offset = footerYloc - height;
        menu.animate({top:offset+"px"},{duration:500,queue:false});  
    });


});