时间戳

首页 > 解决方案 > 固定行和滚动锁的问题 - Bootstrap 4

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

问题描述

我正在尝试在顶部创建一个包含一些内容的页面，并在下方创建一个“表格”类型区域。当用户滚动到顶部时，我希望用作表头的行固定在窗口顶部，其余内容滚动。我正在使用引导程序 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%，那么它会延伸到容器之外，如果我没有指定任何它不与网格对齐的东西。有谁知道我该如何解决这个问题？

谢谢！亚历克斯

标签： javascriptjquerycssbootstrap-4

解决方案

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

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

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

坚持顶级codepen

推荐阅读