如何防止越过其他div？ [英] How to prevent get over other divs?

问题描述

我有一个问题...在下面的例子中，我不想让固定的div在背景红色的div上。

在这里是示例：

http://jsfiddle.net / HFjU6 / 3645 /

  #fixedContainer 
 {
 background-color：#ddd ; 
 position：fixed; 
 width：200px; 
 height：100px; 
 left：50％; 
 top：0％; 
 margin-left：-100px; / * half the width * / 
} 
  

解决方案

好吧，我想我得到了OP想要的东西。他想要一个容器，固定在视口的顶部，但仍然由父母限制。此行为称为条件粘性行为，实际上在Firefox（无供应商前缀）和macOS / iOS Safari（使用 -webkit - 前缀）中实现： a href =http://caniuse.com/#feat=css-sticky =nofollow> position：sticky 。

因此，最简单的（但也是最小的跨浏览器兼容的）方法是简单地修改您的标记，使得粘性元素保留在父级中，并且声明 position：sticky ：

  * {margin：0; padding：0;}＃fixedContainer {background-color：#ddd;位置：-webkit-sticky; position：sticky; width：200px; height：100px;左：50％; top：0％; transform：translate（-50％，0）; / *负左边距不适用于粘性* /}＃div1 {height：200px; background-color：#bbb;}＃div1 .content {position：relative; top：-100px; / *顶部偏移必须手动计算* /}＃div2 {height：500px; background-color：red;}  

 < div id = div1> < div id =fixedContainer>我是一个粘滞的容器，留在粘性父级< / div> < div class =content>粘性父级< / div>< / div>< div id =div2>只是另一个元素< / div>  
 

另一种方法是使用基于JS的解决方案。在这种情况下，您实际上不必修改您的标记。

逻辑的要点是：

• 当滚动位置不超过父节点的底部减去粘性内容的外部高度时，则我们不执行任何操作。


• 滚动位置超过了父节点的底部减去粘性内容的外部高度，我们动态计算粘性内容的顶部位置，以便它在父节点中可见。 / li>
  

  $（function（）{$窗口）.scroll（function（）{var $ c = $（'＃sticky-container'），$ s = $（'＃sticky-content'），$ t = $（this） object if（$ t.scrollTop（）> $ c.outerHeight（） -  $ s.outerHeight（））{$ s.css（'top'，$ c.offset（）。top + $ c.outerHeight -  $ t.scrollTop（） -  $ s.outerHeight（））; } else {$ s.css（'top'，0）; }}）;}）;  

  * {margin：0 ; padding：0;} div {height：500px; background-color：red;}＃sticky-container {background-color：#bbb; height：200px;}＃sticky-content {background-color：#ddd;位置：固定; width：200px; height：100px; margin-left：-100px;左：50％; top：0;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =sticky-content>保留在bounds of＃div1< / div>< div id =sticky-container>粘性限制区域< / div>< div>其他内容< / div>  

---

OP之前的旧答案可以恰当地澄清问题：

只要给他们适当的 z-index 值即可。在这种情况下，您希望：

1. 不要使用静态定位。 code> position：relative 与 position：fixed 元素结合使用。 b
2. 分配适当的堆叠顺序。< div> 元素具有最低的 z-index ，然后是位置固定元素，然后是红色元素。

堆叠：当您遍历节点树向上或向下时，堆叠上下文为重置。

这里是一个概念验证的例子，从你的小提琴修改，使得内联CSS被删除。

  * {margin：0; padding：0;}＃fixedContainer {background-color：#ddd;位置：固定; width：200px; height：100px;左：50％; top：0％; margin-left：-100px; z-index：2;}＃div1 {height：200px; background-color：#bbb;位置：相对; z-index：1;}＃div2 {height：500px; background-color：red;位置：相对; z-index：3;}  

 < div id = fixedContainer> z-index：2< / div>< div id =div1> z-index：1< / div>< div id =div2> z-index：3& div>  

I have a problem...In the following example i don't want that the div who is fixed get over the div with the background red.

Here is the example:

http://jsfiddle.net/HFjU6/3645/

 #fixedContainer
{
    background-color:#ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px; /*half the width*/
}

解决方案

Alright, I think I get what the OP wants. He wanted a container that stays fixed on the top of the viewport, but remains confined by a parent. This behaviour is known as a conditional sticky behaviour, and is actually implemented in both Firefox (without vendor prefix) and macOS/iOS Safari (with -webkit- prefix): see position: sticky.

Therefore the easiest (but also the least cross-browser compatible) way is simply to modify your markup, such that the sticky element stays within a parent, and you declare position: sticky on it:

* {
  margin: 0;
  padding: 0;
}
#fixedContainer {
  background-color: #ddd;
  position: -webkit-sticky;
  position: sticky;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0);  /* Negative left margins do not work with sticky */
}
#div1 {
  height: 200px;
  background-color: #bbb;
}
  #div1 .content {
    position: relative;
    top: -100px;  /* Top offset must be manually calculated */
    }
#div2 {
  height: 500px;
  background-color: red;
}

<div id="div1">
  <div id="fixedContainer">I am a sticky container that stays within the sticky parent</div>
  <div class="content">Sticky parent</div></div>
<div id="div2">Just another element</div>

An alternative would be to use a JS-based solution. In this case, you do not actually have to modify your markup. I have changed the IDs for easier identification of the elements, however.

The gist of the logic is this:

• When the scroll position does not exceed the bottom of the parent minus the outer height of the sticky content, then we do not do anything.
• When the scroll position exceeds the bottom of the parent minus the outer height of the sticky content, we dynamically calculate the top position of the sticky content so that it remains visually in the parent.

$(function() {
  $(window).scroll(function() {
    var $c = $('#sticky-container'),
      $s = $('#sticky-content'),
      $t = $(this); // Short reference to window object

    if ($t.scrollTop() > $c.outerHeight() - $s.outerHeight()) {
      $s.css('top', $c.offset().top + $c.outerHeight() - $t.scrollTop() - $s.outerHeight());
    } else {
      $s.css('top', 0);
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
div {
  height: 500px;
  background-color: red;
}
#sticky-container {
  background-color: #bbb;
  height: 200px;
}
#sticky-content {
  background-color: #ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  left: 50%;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-content">Sticky content that stays within the bounds of #div1</div>
<div id="sticky-container">Sticky confinement area</div>
<div>Other content</div>

---

Old answer before OP clarified the question appropriately:

Just give them the appropriate z-index values. In this case, you want to:

1. Do not use static positioning. This can be done by using position: relative for the large elements, in conjunction with the originally position: fixed element.
2. Assign the appropriate stacking order. The grey <div> element to have the lowest z-index, followed by the position fixed element, and then by the red element.

There are some catchalls to stacking though: the stacking context is reset when you traverse up or down the node tree. For example, the example will not work if the elements are not siblings.

Here is a proof-of-concept example, modified from your fiddle so that inline CSS is removed.

* {
  margin: 0;
  padding: 0;
}
#fixedContainer {
  background-color: #ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px;
  z-index: 2;
}
#div1 {
  height: 200px;
  background-color: #bbb;
  position: relative;
  z-index: 1;
}
#div2 {
  height: 500px;
  background-color: red;
  position: relative;
  z-index: 3;
}

<div id="fixedContainer">z-index: 2</div>
<div id="div1">z-index: 1</div>
<div id="div2">z-index: 3</div>

这篇关于如何防止越过其他div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！