Question

我希望一个元素在滚动时保持其位置，但只要与容器元素的高度一样长。

我在这个例子中找到了一个很好的答案：http://jsfiddle.net/R8bUQ/

但是我想知道是否有办法在没有指定容器元素的高度的情况下进行响应。

这里尝试失败......元素一直显示在容器外面！

＆＃13;

$parent = $('.container');
$elem = $parent.find('div');

$(window).scroll(function(){ 
  $elem.css('top', $(window).scrollTop());
}).trigger('scroll');

＆＃13;

div {
  min-height: 200px;
  margin-left: 60px;
  background: #ccc;
  width: 300px;
}
div.container {
  margin-top: 80px;
  position: relative;
}
div .element {
  min-height: 20px;
  width: 100%;
  background: #0f0;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
}
div.outer-div {
  min-height: 650px;
  margin-top: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
  <p>Another content inside container</p>
</div>
<div class="outer-div">
  Another outer content. Element should not show over this div.
</div>

＆＃13;

Answer 1

您可以通过在js代码中添加条件来检查内部元素是否超出父元素。

＆＃13;

$parent = $('.container');
$elem = $parent.find('.element');
$(window).scroll(function() {
  if (($(window).scrollTop() + $elem.height()) < ($parent.offset().top + $parent.height())) {
    $elem.css('top', $(window).scrollTop());
  }
}).trigger('scroll');

＆＃13;

div {
  min-height: 200px;
  margin-left: 60px;
  background: #ccc;
  width: 300px;
}

div.container {
  position: relative;
}

div .element {
  min-height: 20px;
  width: 100%;
  background: #0f0;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
}

div.outer-div {
  min-height: 650px;
  margin-top: 40px;
}
body,p { margin: 0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
  <p>Another content inside container</p>
</div>
<div class="outer-div">
  Another outer content. Element should not show over this div.
</div>

＆＃13;

Answer 2

再次阅读你的问题。如果我理解你想要达到的目标，那就是以下内容：

将给定容器的内部元素固定，但是固定到窗口滚动条

没有JS就可以做到。也就是说，使用纯CSS和HTML。

粘性方式： 有关详情，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/position

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
  <p>Another content inside container</p>
</div>
<div class="outer-div">
  Another outer content. Element should not show over this div.
</div>

div .element

注意div .element { min-height: 20px; width: 100%; background: #0f0; position: absolute; margin: 0; top: 0; left: 0; }

只有两个轻微变化的人

这

div .element {
  min-height: 20px;
  width: 100%;
  background: #0f0;
  position: sticky;  
  margin: 0;
  top: 80px;
}

要

postiion

top和top已更改。你可以在上面给我的链接上看到原因。

如果您希望元素位于容器可见部分的顶部，请将0px设置为div { min-height: 200px; margin-left: 60px; background: #ccc; width: 300px; } div.container { margin-top: 80px; position: relative; } div .element { min-height: 20px; width: 100%; background: #0f0; position: sticky; margin: 0; top: 0px; } div.outer-div { min-height: 650px; margin-top: 40px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
  <p>Another content inside container</p>
</div>
<div class="outer-div">
  Another outer content. Element should not show over this div.
</div>

<a>
<b has attributes/>
<c>
<d/>
<e/>
</c>
</a>

相对于容器的响应固定位置元素

2 个答案: