修复父元素中的元素答案

【问题标题】：Fix element in parent element修复父元素中的元素
【发布时间】：2015-07-10 21:01:43
【问题描述】：

我想让一个元素 (h1) 像 position:fixed 在另一个元素（一个部分）内一样。 h1 应该固定在视口上的某个位置，但在滚动过该部分时必须消失（因为它仍在该部分内）。这适用于背景图像，但不幸的是position:fixed 修复了视口内的 h1 元素并忽略了周围的部分元素。

有什么方法可以做到这一点，最好只使用 HTML 和 CSS？

(背景固定方式：

section {
   position: relative;
   display: block;
   width: 100vw;
   height: 100vh;
   background-size: cover;
   background-attachment: fixed;
   background-position: center center;
}

section:first-child {
   background-image: url(img/1.jpg);
}

section:nth-child(2) {
   background-image: url(img/2.jpg);
}

【问题讨论】：

听起来像position:sticky，但它还没有完全的浏览器支持。但是，您所说的只是要求。到目前为止，您尝试了什么？
你不能使用position: absolute 吗？ link
我尝试了绝对/相对定位的不同组合，甚至尝试在 javascript 中更改 h1 元素的内容，但我觉得这应该在 HTML/CSS 中作为背景固定作品是可行的正如我所料。
在您问题的左侧，upvote/downvote 工具具有此功能。检查页面代码后，我可以看到它是一个表格单元格，它占据了整个段落的高度，其中 div 正在滚动。但是你需要一些 JS 来检测单元格内 div 的位置，并决定何时锁定或解锁它。
Position absolute 将元素固定在节内的某个位置，但也会随着节滚动。

标签： javascript html css css-position

【解决方案1】：

您可以做的一件事是将容器的内容包装在 div 中，并使用规则 position:absolute 和 position:relative 用于外部容器。然后在 inner 包装器上使用overflow:auto，这样当您滚动时，您不会滚动外部容器，而是滚动内部容器。这样，当您在外部容器内的另一个元素上使用 position:absolute 时，它会在外部容器内显示为 fixed。当您滚动容器的内容时它不会移动，但会随着容器移动，我认为这是您正在寻找的。要将您的“固定”元素放在内容之上，请使用z-index:1

<div class="container"> <!-- use position:relative -->
    <div class="fixed-inside-container">"Fixed"</div> <!-- use position:absolute; z-index:1; -->
    <div class="container-content"></div> <!-- use position:absolute; height:100%; overflow:auto; -->
</div>

这里有一个小提琴演示：https://jsfiddle.net/ilpo/ht2j81Lt/

【讨论】：

【解决方案2】：

你也可以使用这个 jquery：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if ($(window).scrollTop() > $(window).height() ) {        
        $(".first-text").addClass("absolute");
        $(".second-text").addClass("fixed");        
     }   
    else {
        $(".first-text").removeClass("absolute");
        $(".second-text").removeClass("fixed");    
    }
});

因此，当您更改滑块时，您可以更改文本的position（从绝对到固定）添加一个类，如下例所示：

FIDDLE

【讨论】：

【解决方案3】：

试试这个插件：https://github.com/gwdhost/SnapToTop，它可以将元素定位在你喜欢的位置。

【讨论】：