2009-11-14 4 views
0

How can I have a sliding menu div that doesn't move unless the page is scrolled down past a certain pointкак остановить плавающий (скользящий) 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});  
      } 
     ); 
    } 
); 

ответ

0

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

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

+0

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

0

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

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

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

Я сделал это с my own page here.

+0

nope. У меня есть целевое плавающее меню, например, здесь: http://www.kingtray.com/ – Matt

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