0

我有一组引导导航选项卡,在这些选项卡中是很好的长信息部分。问题是我们的团队不希望在这么长的选项卡上包含所有这些信息,因此我们使选项卡容器元素具有溢出:滚动属性。这很好用,但现在我们被一个不可能长的内联滚动部分困住了,它需要 30-40 个鼠标滚动才能到达底部。这将失去我们的网站流量。

我知道固定位置的定义相对于浏览器窗口是固定的,但我需要一种方法来在父 div 内使用 bootstrap scrollspy nav-list 菜单,并且不能让它在该 div 之外横向移动. 因此,我们需要它的方式与 class="fixed-to-top" 属性的工作方式相同,因此它是一个可运行的导航菜单,但无论我们尝试什么,似乎固定定位总是恢复为相对于浏览器的位置。

有可能做我们想做的事吗?

4

1 回答 1

0

下面的代码不是一个完整的实现,但我希望它能让您了解它是如何完成的。即,如果固定 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'});
}
于 2013-07-08T11:00:45.127 回答