增强说唱修复全宽元素，内容对齐

boostrap fix full width element with content aligned

本文关键字：元素 对齐 增强      更新时间：2023-09-26

我有一个div，当它滚动到时会变得fixed。我希望这个div 处于fixed状态时全宽。我通过将width: 100%设置为有问题的div 来做到这一点。问题是我希望div 的内容仍然与页面的内容对齐，而不是向左移动。我希望能够在不更改当前 html 标记的情况下执行此操作。<小时 />示例：滚动到并处于fixed状态时的全宽。

小提琴：https://jsfiddle.net/DTcHh/19335/

<小时 /> 示例：如果我向左添加填充以将内容向内移动，则可以正常工作。问题是左边的填充可以是任何数字 - 有没有办法可靠地解决这个问题？

小提琴：https://jsfiddle.net/DTcHh/19337/<小时 />.CSS：

#myDiv.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

Jquery：

$(window).scroll(function() {
  if (isScrolledIntoView($('#myDivWrapper'))) {
    if (!initSet) {
      initSet = true;
    }
    $("#myDiv").removeClass('fixed');
  } else if (initSet) {
    $("#myDiv").addClass('fixed');
  }
});

在#myDiv内添加一个额外的.containerdiv，并在固定发生时调整填充。

<div id="myDivWrapper">
    <div id="myDiv">
      <div class="container">
        <p>
          This should be fixed once it comes into view and then goes out of view.
        </p>
      </div>
    </div>
  </div>

#myDiv .container {
  padding: 0;
}
#myDiv.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
#myDiv.fixed .container {
padding: 0 15px;
}

这可能可以稍微整理一下，但我想你明白了。

JSfiddle

不要写左：0

在此处输入链接说明

#myDiv.fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}

您只需计算内容和窗口边缘之间的度量值，然后在需要时将其应用为左填充。

var measure = ($(window).width() - ($('#myDiv').offset().left + $('#myDiv').width()));
$(window).scroll(function() {
  if (isScrolledIntoView($('#myDivWrapper'))) {
    if (!initSet) {
      initSet = true;
    }
    $("#myDiv").removeClass('fixed').css('padding-left', 0);
  } else if (initSet) {
    $("#myDiv").addClass('fixed').css('padding-left', measure+'px');
  }
});

德莫小提琴 https://jsfiddle.net/DTcHh/19338/

编辑

：如果编辑标记是一个选项，我建议@Paulie_D的方法。不过，您不需要添加另一个容器 - 只需将一个类添加到现有标记中即可。

演示小提琴 https://jsfiddle.net/DTcHh/19340/

<div id="myDivWrapper">
    <div id="myDiv">
      <p class="container">
        This should be fixed once it comes into view and then goes out of view.
      </p>
    </div>
  </div>

由于所有段落都在container类中，因此您也可以将此类添加到固定段落中。 

    $("#myDiv").removeClass('fixed');
    $("#myDiv p").removeClass('container');
  ...
    $("#myDiv").addClass('fixed');
    $("#myDiv p").addClass('container');

此外，您需要告诉#myDiv全宽： 

#myDiv.fixed {
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
}

请参阅此处的工作示例。

相关文章：