简体繁体 English

如何将Sidenav固定到现有的粘性标头上滚动？

[英]How to make a sidenav fixed to an existing Sticky Header onscroll?

原文 2017-03-16 07:44:35 9 1 javascript/ jquery/ html/ css

I already have Sticky header nav in my project, however I need to have the sidenav (filter section) or Aside also show fixed on the left when the scroll occurs as there is a long list on the right side of the page. 我的项目中已经有粘性头导航，但是当滚动发生时，由于页面右侧有一个长长的列表，因此我需要在左侧固定显示sidenav（过滤器部分）或Aside。 As I mentioned the header is already in FIXED position to top. 正如我提到的，标题已经在顶部的固定位置。 How can I make the Aside or sidenav to stick along with the header, just beneath it. 我该如何使Aside或sidenav与标头一起紧贴在标头下方。 I am unable to do it via CSS and not sure how can I accomplish this using jquery. 我无法通过CSS做到这一点，并且不确定如何使用jquery完成此操作。

Any help would be much appreciated. 任何帮助将非常感激。 Thanks in Advance.. 提前致谢..

1 个解决方案

Can you please provide us with your code with the css? 能否请您将带有CSS的代码提供给我们？ Basically what you can do is: 基本上，您可以做的是：

Create a container to have your sidebar and center section in with overflow hidden and width to 100%. 创建一个容器以隐藏边栏和中间部分，其中隐藏了溢出并且宽度为100％。
Set the sidebar position as relative, with a provided width and padding to the top so that the navbar does not overlap on it. 将侧边栏位置设置为相对，并具有提供的宽度和顶部填充，以使导航栏不重叠。
Set your main container (the element containing the list) width position relative, this way it will display next to the sidebar, you can add overflow auto to make sure that you get a scrollbar when you have many list items. 设置您的主容器（包含列表的元素）的宽度位置相对，这样它将显示在侧边栏旁边，您可以添加溢出自动以确保当有很多列表项时获得滚动条。

There are several ways to solve your problem. 有几种方法可以解决您的问题。 You can also use an Iframe but I wouldn't recommend it for responsive designs. 您也可以使用iframe，但我不建议将其用于自适应设计。