Prevent CSS footer from scrolling

Question

#bottom_fade {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: url("bottom-fade.png");
            background-repeat:repeat-x;
            height: 400px;
            z-index: 2;
            }
        .categories {
            position: absolute;
            left: 50%;
            color:black;
            word-wrap: break-word;
            font-family: 15px 'Libre Baskerville', serif;
            margin-left: -200px;
            z-index: 1;
            }
        .categories td {
            width: 200px;
            }

you may see the result of the above code here. Try to resize your browser window so that you're forced to scroll to see the whole text in the table.

As you scroll, you may see that #bottom_fade will not remain sticked to the bottom of the page but will follow your scrolling. I don't want that to happen: how can I say to bottom_fade to ALWAYS stays attached to the bottom of the browser window, no matter what happens to the scrollbar?

Many thanks!

it's unrelated but you might consider setting `pointer-events:none` on your footer, it interrupts selecting text, see: [Click through a DIV to underlying elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) — MikeM, Feb 13 '13 at 21:13
oh! thanks a lot dude, didn't even considered that. I'll add it! — Saturnix, Feb 13 '13 at 21:22

score 6 · Accepted Answer · answered Feb 13 '13 at 21:10

6

Change

#bottom_fade {
        position: absolute;
}

to

#bottom_fade {
        position: fixed;
};

and it should work like a charm.

(nice effect by the way!)

answered Feb 13 '13 at 21:10

Pbirkoff

4,642
2
20
18

+1 and thanks for the answer. However, with your solution now the scrollbar doesn't show up (I'm using Safari). Is there any way I can still scroll the table while maintaining the effect? I saw this on many websites... – Saturnix Feb 13 '13 at 21:25
1

Hmm, that's weird, it seems to work on Firefox. Are you sure you put the fixed on the correct element? (On your site I noticed you put #categories's position on fixed...) – Pbirkoff Feb 13 '13 at 22:17
I am an idiot. I was changing the wrong selector, it works fine now. thx! – Saturnix Feb 13 '13 at 23:42

Prevent CSS footer from scrolling

1 Answers1