Fixed footer after fold

Been searching all around the infinite webs and haven’t been able to find it (I may be looking in the wrong places), so here it goes…

I want to use the position:fixed on the footer so that it always is at the bottom (even if it is above the content, like it is supposed for a static element) but just below the initial viewport’s fold, just visible after I scroll down a little.

I dunno if that’s clear enough. Please advice?

Hi hallaathrad, Welcome to SitePoint :slight_smile:

but just below the initial viewport’s fold, just visible after I scroll down a little.

Fixed positioned elements are positioned in relation to the viewport and if they go beyond the viewport (left,right,top or bottom) they cannot be reached by scrolling since they are Fixed.

You also need to be aware that everyone’s viewport dimensions are not the same. What may work for you could be out of reach on another machine. It is best to keep fixed position elements at the very top or very bottom and keep them as small as possible. It is also best practice to preserve the space they use by padding out elements the interact with the fixed element.

Thanks for the welcome, and please forgive my rudeness in not introducing myself before…
Since what you say about position:fixed makes absolute sense, I guess I won’t be able to use it anymore to achieve what I want.
Still the problem remains:
Need to have a “fixed” footer, floating over content if necessary, but visible only a little below viewport’s fold. I need to figure out a way to keep that minimum distance between header and footer, just by using css if possible.

Need to have a “fixed” footer, floating over content if necessary, but visible only a little below viewport’s fold
You can position a fixed footer below the fold, all I was saying is that you can’t scroll to the portion that is hidden. If there is important content/text that is hidden it would be inaccessible.

I need to figure out a way to keep that minimum distance between header and footer, just by using css if possible.
That’s where I was talking about viewports being different heights for everyone. Let’s say for example, you positioned your fixed footer at top:700px; and that made it work for your monitor/settings. Someone else may have a shorter monitor with five toolbars stacked up on their browser head, it would be out of sight for them.

Yes, I already know that… still, there should be a way to do what I want, maybe by using javascript? so that it changes a negative margin-bottom value as you scroll down and back up those initial pixels.

Sounds like you’re talking about a 100% min-height layout… Do you want it visible if the content is short enough to fit it, or do you (and this is where I think the confusion lies) always want to have to scroll to see it?

If the former, use a standard min-height layout like this one…
100% min-height Demo

If the latter, pull the negative margin top off the footer and the excess padding off the bottom of Content and #sidebar in that example. No “fixed” necessary.

Yes, if I understand what you are wanting to do that would require scripting.

Here is an old demo of a jQuery scroll follow script

Scroll Follow Test

It’s actually set as position:absolute; in the CSS then the script does it’s work from there.

Seems like the scroll follow is going to be the answer…
I was hoping for a css only solution.

the site I’m working is morganbacall.com … right now has the fixed footer, and it hovers over the content… I like it like that, without the apparent vibration/movement the suggested scroll follow gives. I just wanted to be visible after the initial fold.
Is it possible to set the script so that it doesn’t “vibrate” when moving?

That solution is the “sticky footer”, and it doesn’t make the footer hover over the content, which I like from the fixed footer.

yes… a fixed footer, visible right after the fold… not initially (a viewport+footer_height worth of distance between the header and footer).

That’s an unusual way to build a page, but yeah – that’s just a 100% min-height layout without the min-height…

Well, unless you want it to appear the moment they scroll instead of placing it after all content… Which I wouldn’t even try to do just because it sounds too easy to break, might rely on scripting, and could be a usability nightmare.

But of course, that’s why such tricks rarely stay on the websites that try them for more than a month.

Well there is another way to do it with CSS only.

As I mentioned you can’t scroll to the hidden portion of the fixed div but you can lift it up on :hover :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pop-Up Fixed Div</title>

<style type="text/css">
body, p {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 1000px;
    margin: 0 auto;
    background: #DDD;
}
#content {
    overflow: hidden;
    padding: 1px 0 40px;
}
h1 {
    margin: 10px;
    font-size: 1.5em;
    text-align: center;
}
#content p {
    margin: 30px 10px;
    letter-spacing: 15px;
    word-spacing: 30px;
    text-transform: uppercase;
}
#fixed {
    min-height: 50px;
    position: fixed;
    left: 50%;
    bottom: -35px;
    margin-left: 150px;
    padding: 10px 10px 0;
    background: lime;
    border: 1px solid #000;
    text-align: center;
}
#fixed:hover {
    bottom: 0
}
#fixed ul {
    overflow: hidden;
    margin: 5px 0;
    padding: 0;
    list-style: none;
}
#fixed li, #fixed a {
    float: left;
}
#fixed a {
    color: #00f;
    padding: 5px 15px;
    background: #FF0;
    text-decoration: none;
}
#fixed a:hover {
    color: #FFF;
    background: #000;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="content">
        <h1>Pop-Up Fixed Div</h1>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
        <p>scrolling text scrolling text</p>
    </div>
    <div id="fixed">
        <p>Hover here to lift up this fixed div!</p>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </div>
</div>

</body>
</html>

Well, the client changed his mind so I won’t be needing the trick anymore… The last hover was kinda close.
Thanks for your help.