Question

我希望在另一个元素（一个部分）中有一个元素（h1）就像position:fixed一样。 h1应该保持固定在视口上的某个位置，但是当滚动到该部分时必须消失（因为它仍然在该部分内）。这适用于背景图像，但不幸的是position:fixed修复了视口内的h1元素并忽略了周围的section元素。

有没有办法可以做到这一点，最好只有HTML＆amp; 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);
}

Answer 1

您可以做的一件事是将容器的内容包含在position:absolute内，并使用规则position:relative和overflow:auto作为外部容器。然后在内部包装器上使用position:absolute，这样当您滚动时，您将无法滚动外部容器而是内部容器。这样，当您在外部容器中的另一个元素上使用fixed时，它将在外部容器中显示为z-index:1。当您滚动容器的内容时它不会移动，但会随容器一起移动，我认为这是您正在寻找的容器。把你的＆＃34;固定＆＃34;元素位于内容之上，请使用<div class="container">  <div class="fixed-inside-container">"Fixed"</div>  <div class="container-content"></div>  </div>

<catalog_category_default translate="label">
<label>Catalog Category (Non-Anchor)</label>
<reference name="right">
    <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
</reference>
<reference name="content">
    <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
        <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
            <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
               ---
               ---
               ---
            </block>
            <action method="setColumnCount"><count>4</count></action>  <!-- Add this line -->
            <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
            <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
            <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
            <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
            <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
            <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
        </block>
    </block>
</reference>

以下是您的小提琴演示：https://jsfiddle.net/ilpo/ht2j81Lt/

Answer 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

Answer 3

尝试使用此插件：https://github.com/gwdhost/SnapToTop，它可以将元素放置在您喜欢的位置。

修复父元素中的元素

3 个答案: