CODEWITHSUNDEEP
javascripthtmlcss
sapp5
sapp5

Reputation: 13

Hiding/revealing position:fixed container under non-fixed containers

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?

The effect would be similar to a parallax scrolling situation in which foreground content scrolls over a fixed background, but I want to be able to place HTML in the background, not just an image, and I want to be able to interact with that HTML.

Specifically, I set up a Fiddle (code below) with a series of full-width div containers at the top of my page that users can scroll through, and I have a position:fixed gallery on z-index:-1 that is "revealed" after the last top container scrolls by. Continuing to scroll through the page brings up additional full-width div containers that hide the fixed gallery.

The only way I can see to achieve this "reveal" space between the top containers and bottom containers is by adding a middle, empty container with a pixel height — but that prevents the user from clicking on anything in the gallery below. Plus, ideally, I'd want that height to be based on the viewport height, not a fixed pixel number. Is there a better method to create the same layout? Or a workaround for this setup?

I have been able to track down an example of what I want to achieve at http://pro.boombotix.com (see especially the gallery section right before "water resistant"). They seem to be doing it with javascript, but they have an enormous amount of code that I'm having trouble sorting through.

Any help is appreciated!

<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>

Upvotes: 1

Views: 59

Answers (1)

user3163495
user3163495

Reputation: 3577

"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?"

I will stop at this first question, and provide you with this. Ignore how the other site is doing it and work from this concept. If you space the scrollable content out using margin-top:10px or something, you can click through that space. Just don't put the scrollable content in a container div that overlaps the fixed content. Try this out.

<!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>

Upvotes: 1

Related Questions