Как разместить div, закрепленный внутри другого div?

Question

У меня есть набор загрузочных навигационных вкладок, и внутри этих вкладок есть хорошие длинные разделы информации. Проблема в том, что наша команда не хочет иметь всю эту информацию на такой длинной вкладке, чтобы мы сделали элемент контейнера tabs переполнением: свойство прокрутки. Это отлично работает, но теперь мы застряли с невероятно длинной линейной секцией прокрутки, и для того, чтобы добраться до дна, потребовалось бы 30-40 прокруток мыши. Это потеряет нам трафик на сайте.

Я знаю, что определение фиксированной позиции фиксируется относительно окна браузера, но мне нужен способ использовать меню навигационного списка scootlspy в родительском div и не иметь возможности поперечного вне этого div. Таким образом, мы нуждаемся в этом так же, как атрибут class = "fixed-to-top" работает так, что это функциональное навигационное меню, но независимо от того, что мы пытаемся, кажется, что фиксированное позиционирование всегда возвращается обратно к отношению к броузеру.

Можно ли делать то, что мы пытаемся сделать?

Answer 1

Код ниже не является полной версией, но я надеюсь, что это даст вам представление о том, как это можно сделать. То есть измените свойство position, если фиксированный div выходит за пределы своего родителя/контейнера.

var $nlm = $('#navListMenu'); 
$(window).bind('scroll', function(){ 
    if($nlm.offset().top < $nlm.parent().offset().top) 
     $nlm.css({ position:'absolute', top:0 }); 
    else 
     $nlm.css({ position:'fixed'}); 
}