html - 修复了保留在其父 div 内的导航

Question

我正在制作一个宽度可变的网站，并且在我的一个页面上有一个固定的侧边栏。现在它工作正常，因为我只有两个链接；侧边栏不是很高。布局是这样的:

标题

侧边栏内容

页脚

由于页眉，侧边栏的位置相当靠下，如果它太高，它会溢出到页脚中。我希望它在达到屏幕上的特定高度后启动并“固定”

换句话说:

1. 相对直到向下滚动
2. 修复直到到达页脚
3. 到达页脚后相对

Answer 1

哦，我刚刚做了这个:使用 jQuery 检查导航的滚动位置

在 http://trans.worldvision.com.au/ChildSponsorship/ChildSearch.aspx 查看源代码看看它是如何工作的。

您无法使用纯 CSS 实现此目的，不幸的是，它需要 jQuery 或其他一些 JavaScript/库。

抱歉布局...显然，iPad 没有 Tab 键。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

$(window).scroll(function () {   
               if ($(".csnavHome").position().top < $(window).scrollTop()) {
                   $(".csnav").css("position", "fixed");

                   $(".csnav").css("z-index", "2");
               } else {   
                   $(".csnav").css("position", "relative");
                   $(".csnav").css("z-index", "0");
                   $(".csnav").css("top", "0");
               }
           });