javascript - 父 div 不起作用的两列网格的粘性位置-6ren

javascript - 父 div 不起作用的两列网格的粘性位置

转载作者：行者123 更新时间：2023-11-28 01:28:25

我希望两列网格中的一列保持粘性。我正在尝试在单个页面站点中创建一个特定于特定 div 的垂直导航栏，并在整个页面上使用固定的水平导航栏。但是粘性没有发生。

我创建了一个 div- strategy-container；使用网格在其中嵌套了两个 div。我希望带有类侧边栏的 div 具有粘性。

我知道这将粘附到其父 div，即 strategy-container div。

但是 sidenav 也在移动。

策略容器相对定位，溢出可见。

为什么会这样？

.strategy-container {
  position: relative;
  overflow: visible;
}

.sidenav {
  /* Full-height: remove this if you want "auto" height */
  /* Set the width of the sidebar */
  position: sticky;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 50px;
  /* Stay at the top */
  left: 0;
  background-color: red;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
}

<div id="about" class="container-fluid strategy-container">
  <div class="row">
    <div class="col-sm-4 col-md-3 sidenav">

      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>

    </div>
    <div class="col-sm-9">

      some stuff to be scrolled;
      <br><br><br> Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae
      nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
      agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
      definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text
      to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
      his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
      laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<br><br> some stuff to be scrolled;
      <br><br><br> Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae
      nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
      agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
      definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text
      to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
      his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
      laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<br><br> some stuff to be scrolled;
      <br><br><br> Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae
      nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
      agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
      definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text
      to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
      his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
      laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<br><br> some stuff to be scrolled;
      <br><br><br> Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae
      nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
      agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
      definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text
      to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
      his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
      laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<br><br>

    </div>
  </div>
</div>

是不是因为该列坚持将行 div 作为其父级。我怎样才能实现我需要的东西？

谢谢 :).

最佳答案

粘性位置在 .sidenav 上起作用，但它已经在顶部，它似乎没有粘性。

而是在侧边栏的内部 div 上使用sticky-top(Bootstrap 4 类)...

<div class="container-fluid strategy-container">
    <div class="row">
        <div class="col-sm-4 col-md-3 sidenav">
            <div class="sticky-top">
             <a href="#">About</a>
             <a href="#">Services</a>
             <a href="#">Clients</a>
             <a href="#">Contact</a>
            </div>
        </div>
        <div class="col-sm-9">
            ...
        </div>
    </div>
</div>

https://www.codeply.com/go/kJxzd16GL5

关于javascript - 父 div 不起作用的两列网格的粘性位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51122307/

文章推荐： css - MVC 5 元素中缺少图标

文章推荐： html - 线性渐变未完全应用于背景

文章推荐： html - css margin 在没有填充的情况下不起作用

文章推荐： css - AngularJS Material : no scrollbar in custom components

html - 给定布局的 Bootstrap 网格(或 IE 兼容的 CSS 网格)
您能否建议如何在 Bootstrap 或 IE 兼容的 CSS 网格中，在没有 CSS 网格的情况下进行以下布局。在大屏幕中头部，左侧堆叠的 body 和右侧覆盖头部和 body 高度的图像。 [
ios - 如何在 Objective-C 中使用 for 循环将 View 创建为网格(例如 9*9 网格、15*15 网格)
我想在 Objective-C 中绘制一个 15*15 的网格。格子颜色是蓝色的，就像在诺基亚制作“贪吃蛇”游戏的棋盘一样。我试过使用 for 循环来创建 subview ，但它似乎不起作用，我查看
具有自动填充和自动大小的 CSS 网格
我正在尝试将 CSS 网格与 grid-template-columns: repeat(auto-fill, auto) 一起使用，单元格被设置为最大宽度，导致每行一个元素。 p> 是否可以让元素宽
Magento，网格，添加带有网站链接的列
我正在努力在网格的自定义列上添加一个指向网站的简单、简单的链接。我用了 Inchoo blog为列添加自定义渲染器，它可以工作。我认为只需修改渲染并添加标签就足够了。但我的希望破灭了，行不通。如何做
具有交替线条样式的 Gnuplot 网格
使用 Gnuplot 我绘制了下图 - 现在，正如您在图像中看到的那样，很难在线条之间识别出其末端的块。所以我想用不同的颜色或样式交替着色网格。我现在用来给网格着色的代码是 - set style
WPF 网格 - 绘制自定义网格线
假设我有一个非常简单的 WPF 网格(6 行 x 6 列)，定义如下:
具有动态列的 wpf 网格
我有一个希望绑定(bind)到 WPF 网格的集合。我面临的问题是列数是动态的并且取决于集合。这是一个简单的模型: public interface IRows { string Messa
java - 如何手动填充表格/网格
我正在使用 Vaadin 8，我想制作某种混淆矩阵。我想知道是否可以根据单元格位置而不是数据提供者手动填充表格/网格的值。 referenceTable.addColumn(reference ->
悬停时带有单行的 CSS 网格
我在 http://jsfiddle.net/TsRJy/ 上创建了一个带有 div 框的网格. 问题我不知道如何使 a:hover 工作。信息重写 HTML 代码，因为表格不适合我。 http
具有自动宽度和高度的 Silverlight 网格
银光处女在这里。如何使网格周围的用户控件自动调整大小以适应内部网格宽度？目前，当浏览器窗口更宽时，用户控件的显示尺寸约为 300 或 400 像素。它在数据网格周围呈现垂直和水平滚动条，这很丑陋。我想
CSS 网格 - 将所有子项保持在一行且间距相等
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一
CSS 网格，中间有一个额外的包装器
我想使用 CSS Grid 的 grid-template-areas。但问题是我正在使用的 CMS 添加了大量额外的包装器。有没有办法忽略额外的包装？因为它弄乱了漂亮的网格区域...... 我正在
extjs - 网格-按钮单击处理程序
在我的Grid中，当我单击“操作”按钮(下面的代码中显示的“删除和编辑”按钮)时，我需要弹出一个窗口，而不用警告消息提醒用户；在下面的代码中，我正在使用HANDLER handler: button
CSS 网格 - 将所有子项保持在一行且间距相等
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一
grid - 网格/仓库布局上离散事件模拟的可视化
我需要模拟一个仓库，其中有几辆自动驾驶车辆在给定的布局上移动，并具有简单的优先级规则。根据我的理解，这个问题可以通过离散事件模拟(DES)轻松解决，我会使用 SimPy为了这。我看到的问题是，我似乎
跨用户控件的 WPF 网格？
在 ASP.NET 中，我可以让用户控件在页面上的表格中占据多个单元格: 用户控件1: foo bar 第1页: 并且自动调整列宽以适应最大的用户控件。这也可以在 WPF
Jquery 实时搜索和复选框过滤器、网格
我正在寻找一种方法来实时搜索我的网格+要过滤的复选框。我有一个包含学生的网格(照片和姓名)。我想要的是有一个复选框，可以过滤学生所在的不同类(class)。还有一个搜索栏，我可以在其中输入学生姓名。
具有自动完成功能的 jQuery 网格
我正在使用 jQuery 和 jQuery UI 构建一个 Web 应用程序。我陷入了僵局。我需要的是一个 jQuery 网格，它具有可编辑字段，并以某种方式在这些可编辑单元格之一上合并一个自动完成字
具有多个分组的 Javascript 网格
我想知道是否有其他 JavaScript 组件可以提供具有多个分组的网格表示。下面是jqGrid的截图我扩展了允许该功能，但它需要获取所有数据。我希望在扩展分组时加载数据。另一个修改后的 jqGri
CSS:网格、滚动条和工具提示问题
我一直在为我将在此处描述的 CSS 问题而烦恼: 在下面的示例 ( https://codesandbox.io/s/jjq4km89y5 ) 中，您可以看到一个可滚动的内容(紫色背景)和一个被左侧面

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 父 div 不起作用的两列网格的粘性位置