个人中心
gpt4 book ai didi

javascript - 隐藏/显示位置 :fixed container under non-fixed containers

转载 作者：行者123 更新时间：2023-11-28 16:10:38 26 4
gpt4 key购买 nike

如何放置 position:fixed内容在页面背景中的容器，而其他内容在其上滚动，同时仍然保持点击背景元素的能力？

效果类似于前景内容在固定背景上滚动的视差滚动情况，但我希望能够将 HTML 放在背景中，而不仅仅是图像，并且我希望能够与那个 HTML。

具体来说，I set up a Fiddle (下面的代码)带有一系列全 Angular div我页面顶部的容器，用户可以滚动浏览，我有一个 position:fixed画廊 z-index:-1在最后一个顶部容器滚动后“显示”。继续滚动页面会显示额外的全 Angular div隐藏固定画廊的容器。

我认为在顶部容器和底部容器之间实现这种“显示”空间的唯一方法是添加一个具有像素高度的中间空容器——但这会阻止用户单击下方图库中的任何内容。另外，理想情况下，我希望该高度基于视口(viewport)高度，而不是固定的像素数。有没有更好的方法来创建相同的布局？或者此设置的解决方法？

我已经能够在 http://pro.boombotix.com 找到我想要实现的目标的示例(特别参见“防水”之前的画廊部分)。他们似乎是用 javascript 来做的，但他们有大量的代码，我很难整理。

感谢任何帮助!

<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .section {
            width: 100%;
            background-color: gray;
            z-index: 0;
            padding: 300px 0;
            text-align: center;
        }
        .white { background-color: white; }
        #gallery {
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: linen;
        }
        #gallery a {
            width: 20%;
            padding: 75px 0;
            display: inline-block;
            text-align: center;
        }
        .pink { background-color: pink; }
        .blue { background-color: cyan; }

        #gallery-pusher {
            height: 1000px;
        }

    </style>
</head>
<body>

    <div class="section">
        <h1>Top Section 1</h1>
    </div>
    <div class="section white">
        <h1>Top Section 2</h1>
    </div>
    <div id="gallery">
        <a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a>
    </div>
    <div id="gallery-pusher"></div>
    <div class="section">
        <h1>Bottom Section 1</h1>
    </div>
    <div class="section white">
        <h1>Bottom Section 2</h1>
    </div>


</body>
</html>

最佳答案

"How can I place a position:fixed container with content in the background of a page while other content scrolls over it, while still maintaining the ability to click on the background elements?"

我会在第一个问题上停下来，并为您提供这个。忽略其他网站是如何做的，并从这个概念开始工作。如果您使用 margin-top:10px 或其他方式将可滚动内容隔开，您可以点击该空间。只是不要将可滚动内容放在与固定内容重叠的容器 div 中。试试这个。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Fixed Background Test</title>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    <style type="text/css">
        html {
            height: 100%;
            margin: 0px;
            border: 0px;
            padding: 0px;
        }

        body {
            height: 100%;
            margin: 0px;
            border: 0px;
            padding: 0px;
        }

        .fixed {
            position: fixed;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: #F6E4CE;
            overflow: hidden;
        }

        .fixed_content {
            margin-top: 20px;
            background-color: #808080;
            height: 100px;
            cursor: pointer;
        }

        .scrollable {
            position: relative;
            z-index: 2;
            margin-top: 40px;
            background-color: #94DD7B;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="fixed">
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
</body>
</html>

关于javascript - 隐藏/显示位置 :fixed container under non-fixed containers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38405746/

26 4 0
文章推荐： html - 为什么我的导航栏和横幅之间有空白？
文章推荐： javascript - 两个全屏视频背景并排在一个窗口中
文章推荐： ios - swift turn-by-turn 映射 ios
文章推荐： swift - 以无限期递减的间隔运行等待 Action 的函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com