CODEWITHSUNDEEP
javascriptjquerycss
ddelnano
ddelnano

Reputation: 469

Having a html element stay in the same position without using position: fixed

To show what I want to do, here is a url. http://octopuscreative.com .

I want something that when I scroll down the height, the cyan div disappears like the website above.

I currently have the scrolling working in my code, however, I cannot see the rest of my HTML that is below my #main div. I don't know if this has anything to do with my new #slideshow div (with a fixed position). I thought since the #slideshow div had its height reduced to 0, I would be able to see the HTML underneath the #main div, but all I see below is white.

var header = $('#slideshow'),
headerH = header.height();

$(window).scroll(function() {
if (header.height() >= 0) {
    header.css({
        height: -($(this).scrollTop() - headerH), position: 'absolute'
    });
}
else if (header.height() < 0 ) {
header.css('height', 0);
header.css('position', 'absolute');
}
});


    </script>
</head>
<body>

    <div id="top">

        <div id="stallion">
            <img id="stallionpic" src="stallion1.png" />
            <h1 class="h1">Stallion Stride</h1>
            <div id="navigation">
            <ul>
                <li><a href="google.com" id="first">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Register</a></li>
                <li><a href="" id="last">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="slideshow">
            <div id="leftbutton"></div>
            <div id="rightbutton"></div>
            <div id="slideshownav">
                <ul>
                    <li><a class="active"></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                </ul>
            </div>
        <div id="slideshow_inner">

            <li id="pic1"><a><img src="pic2.jpg" /></a></li>
            <li id="pic2"><a><img src="pic1.jpg" /></a></li>
            <li id="pic3"><a><img src="pic3.jpg" /></a></li>
            <li id="pic4"><a><img src="pic4.jpg" /></a></li>

        </div>
        <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
        </div>

        <div id="mainContent">
            <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
        </div>
    </div>
    <div id="footer">

    </div>
</body>

Upvotes: 3

Views: 3400

Answers (2)

Paul Straw
Paul Straw

Reputation: 737

I'm the lead dev at Octopus. Here's the bare minimum amount of code to make something like that header effect work (it does use fixed position).

HTML

<div id="hero">
    <h2>I am the hero</h2>
</div>
<div id="main-content">
    <h3>I am the main content</h3>
</div>

CSS

* {
    margin: 0;
}

div#hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #3D6AA2;
    height: 300px;
}

div#main-content {
    height: 1500px;
    background: #fff;
    margin-top: 300px;
    position: relative;
    z-index: 1;
}

I also threw together a jsFiddle that demonstrates it, along with the bit of parallax stuff the site does: http://jsfiddle.net/paulstraw/FW4FF/

Hope that helps!

Upvotes: 3

Alfie
Alfie

Reputation: 2350

position: fixed; positions the element based on viewable screen coordinates, so when you scroll, the position will update to reflect the 'new' top/left boundaries. position: absolute; is more like what you are describing, it will keep the element in the same place, regardless of the content around it, or the browser's scroll position. However, this will take the element out of the 'flow' of the page, and other elements will act like it is not there (and might overlap it). In which case, you will likely have more luck just floating your header left: float: left;.

If you do this, you will probably need to clear the floats in your main div by adding the css style: clear: both;. This will push the main div below any floated content above.

Upvotes: 1

Related Questions