固定行和滚动锁的问题 - Bootstrap 4答案

【问题标题】：Problem with fixed row and scroll lock - Bootstrap 4固定行和滚动锁的问题 - Bootstrap 4
【发布时间】：2023-03-09 07:31:02
【问题描述】：

我正在尝试创建一个顶部有一些内容的页面，下面是一个“表格”类型的区域。当用户滚动到顶部时，我希望用作表头的行固定在窗口顶部，其余内容滚动。我正在使用引导程序 4。下面的javascript（jQuery）允许我这样做，但是当我滚动时，标题行的比例完全改变：太小或太大：

    $(window).scroll(function(e) {
  var $el = $('.header-fix');
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed) {
    $el.css({
      'position': 'fixed', 
      'top': '0px',
      /*'width': '100%' */
    });

  }
  if ($(this).scrollTop() < 200 && isPositionFixed) {
    $el.css({
      'position': 'static',
      'top': '0px'
    });

  }
});

（请参阅此处的损坏示例：https://codepen.io/alexm588/pen/RqWgdO）

我认为我遇到的问题是，当行获得“固定”属性以保持在窗口顶部时，引导逻辑不再起作用。如果我放了一个宽度：100%，那么它会延伸到容器之外，如果我没有指定任何它不与网格对齐的东西。有谁知道我该如何解决这个问题？

谢谢！亚历克斯

【问题讨论】：

标签： javascript jquery css bootstrap-4

【解决方案1】：

根本不需要 jQuery。这已经可以通过引导函数实现。

只需将 CSS 类 'sticky-top' 应用到您想要保持在顶部的 div。看看更新后的 codepen。

<div class="row header-fix sticky-top">

Stick to the top codepen

【讨论】：

谢谢，我怎么错过了 -_- 抱歉！