Question

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

谢谢！亚历克斯

Answer 1

完全不需要jQuery。这已经可以通过引导功能实现。

只需将CSS类“ sticky-top”应用于您要停留在顶部的div。看看更新的codepen。

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

Stick to the top codepen

固定行和滚动锁定的问题-引导程序4

1 个答案: