Держите div внутри порта представления или произвольный div при прокрутке

Question

Я пытаюсь найти сценарий с подлинными сценариями (или создать его), который удерживает вертикальную навигационную панель «липкой» внутри моего окна просмотра. Хотя это может быть не черная магия (можно использовать позицию: fixed css), существует проблема с этим подходом: если панель навигации длиннее высоты окна просмотра, посетитель не сможет увидеть всю навигацию. Поэтому я хочу, чтобы панель навигации не покидала область просмотра сверху, но не оставляла родительский контейнер внизу. Он должен следить за событиями прокрутки мгновенно без фантазии/подпрыгивания анимации.

Возможно ли это? Google не показал ничего полезного для меня. Вы можете знать этот эффект от текстового редактора комментариев к slashdot или игрового поля google video.

Обновление: По существу это будет переписывание плагина jQuery scrollFollow. Не было бы проблем, если бы у меня не было анимации, так как я их не буду использовать. Но он должен иметь возможность оставаться в определенном родительском контейнере без обрезки. Обработка файлов cookie не требуется.

Answer 1

Я знаю, что это действительно старый, но наткнулся на это в то время, пытаясь найти мое собственное решение

Это link показывает, как сделать это в очень легкой форме. По существу, все, что вам нужно, это следующий код (вместе с Jquery загружается конечно)

$(function() { 
    var $sidebar = $("#siderbar"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 
}) 

Если вы не хотите, чтобы оживить просто заменить анимации секции, как так:

$sidebar.stop().animate({ marginTop: VALUE }); 

с

$sidebar.css("marginTop", VALUE); 

Answer 2

Я знаю, что эта проблема устарела, но она появилась в моем поиске в Google, чтобы сделать прохождение div на странице для прокрутки. Это решение работает достаточно хорошо и не позволяет странице иметь бесконечный свиток в моей ситуации, как решение от @Chris выше.

Для размещения якоря необходимо добавить пустой div <div id="sticky-anchor"></div> над плавающим div.

В этом примере DIV должен иметь id="sticky"

Решение: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Javascript:

function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) { 
     $('#sticky').addClass('stick'); 
    } else { 
     $('#sticky').removeClass('stick'); 
    } 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 

CSS:

#sticky.stick { 
    position: fixed; 
    top: 0; 
    z-index: 10000; 
}