我可以让孩子滚动而忽略其固定的父母吗? [英] Can I make a child scroll and ignore its fixed parent?

问题描述

我试图使固定元素的子元素忽略其父元素的"fixed"属性，而是与页面一起滚动.到目前为止，这是我的最佳尝试，不起作用...

I'm trying to make the child of a fixed element ignore its parent's "fixed" property, and instead scroll along with the page. So far, here is my best try, which doesn't work...

CSS:

.main-background {
    position: fixed;
    top: 0;
    z-index: -1;
    background-image: url('');
}    
.header-image {
        position: absolute;
        z-index: 100;
    }

HTML:

<div class="main-background">
<img class="header-image"/>
</div>

为了使事情更清楚，我不是在尝试给孩子一个额外的滚动条，而是试图使其在页面上滚动，就像它位于父级之外一样.

To make things clearer, I'm not trying to give an additional scrollbar to the child, I'm just trying to make it scroll with the page as if it was positioned outside the parent.

我预言有人会回答只是把孩子从父母那里带走"，但这并不能回答我的问题:我正在寻找一种保留现有HTML结构的方法.

I foretell that someone will answer "just take the child out of the parent", but that doesn't answer my question: I'm looking for a way to keep the existing HTML structure.

此外，我想保持位置:固定"，避免使用背景位置:固定"，因为此属性在移动设备上确实不一致.

Also, I want to keep "position: fixed" and avoid "background-position: fixed" because this property is really inconsistent on mobile.

也许不可能，但是我们非常感谢所有帮助！

Maybe it's not possible, but all help is highly appreciated!

推荐答案

似乎您需要一些JavaScript才能执行您要的操作.这是使用jQuery的解决方案.

It looks like you're going to need some javascript in order to do what you're asking. Here's a solution using jQuery.

$(window).scroll( function(){
    $('.header-image').css('top', -$(window).scrollTop() );
});

https://jsfiddle.net/1xba4dzf/

这篇关于我可以让孩子滚动而忽略其固定的父母吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！