Question

我有一个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');
  }
});

Answer 1

在.container内添加额外的#myDiv div，并在修复时调整填充。

<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

Answer 2

不要写左：0

enter link description here

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

Answer 3

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

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');
  }
});

DEmo Fiddle 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>

Answer 4

由于您的所有段落都在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;
}

参见工作示例here。

boostrap修复内容对齐的全宽元素

4 个答案: