滚动显示页脚

Question

I have been trying to use parallax, to hide and show footer on scroll but due to the fact it targets the img this does not work.

i wrote this but it just pops up rather then the main content page sliding up to reveal the footer slowly.

SCRIPT

$(window).on('scroll', function() {
        if ($(window).scrollTop() > 85) {
            $('.footer').show();
        } else {
            $('.footer').hide();
        }
    });

here is any example: http://red-team-design.com/simple-and-effective-dropdown-login-box/

scroll to bottom to see the footer slide out.

Is there a pure css way of doing it? am i missing a trick here. Thanks for your help

FIDDLE https://jsfiddle.net/7uv2fzvp/2/

Answer 1

Yes, that's pure css. Just need to put that position: fixed and z-index: 0 , so like:

.footer {    
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

and the main content position: relative and z-index: 1

.main-content {    
    position: relative;
    z-index: 1;
}

Here is the jsFiddle: https://jsfiddle.net/7uv2fzvp/11/

Answer 2

Demo on JSFiddle

 // Hide Header on on scroll down var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('footer').outerHeight(); $(window).scroll(function(event) { didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make sure they scroll more than delta if (Math.abs(lastScrollTop - st) <= delta) return; // If they scrolled down and are past the navbar, add class .nav-up. // This is necessary so you never see what is "behind" the navbar. if (st > lastScrollTop && st > navbarHeight) { // Scroll Down $('footer').removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if (st + $(window).height() < $(document).height()) { $('footer').removeClass('nav-up').addClass('nav-down'); } } lastScrollTop = st; }

 * { margin: 0; padding: 0; } body { font: 15px/1.3 'PT Sans', sans-serif; color: #5e5b64; position: relative; z-index: 0; } a, a:visited { outline: none; color: #389dc1; } a:hover { text-decoration: none; } section, footer, header, aside { display: block; } #main { position: relative; z-index: 1; background-color: #fff; padding: 120px 0 600px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } #main .tzine-logo { width: 336px; height: 121px; margin: 0 auto 90px; text-indent: -999px; overflow: hidden; display: block; } h1 { font: bold 48px 'PT Sans Narrow', sans-serif; color: #5e5b64; text-align: center; padding-bottom: 300px; position: relative; } h1:after { content: ''; width: 45px; height: 70px; position: absolute; left: 50%; bottom: -85px; margin-left: -23px; } footer { height: 245px; color: #ccc; font-size: 12px; position: relative; z-index: -2; background-color: #31353a; } footer > ul { width: 960px; position: fixed; left: 50%; bottom: 0; margin-left: -480px; padding-bottom: 60px; z-index: -1; } footer > ul > li { width: 25%; float: left; } footer ul { list-style: none; } footer > ul > li ul li { margin-left: 43px; text-transform: uppercase; font-weight: bold; line-height: 1.8; } footer > ul > li ul li a { text-decoration: none !important; color: #7d8691 !important; } footer > ul > li ul li a:hover { color: #ddd !important; } footer p { width: 90%; margin-right: 10%; padding: 9px 0; line-height: 18px; background-color: #058cc7; font-weight: bold; font-size: 14px; color: #fff; text-transform: uppercase; text-shadow: 0 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); margin-bottom: 20px; opacity: 0.9; cursor: default; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } footer > ul > li:hover p { opacity: 1; } footer p:before { content: ''; display: inline-block; width: 16px; height: 18px; margin: 0 12px 0 15px; vertical-align: text-bottom; } /*------------------------- The different colors --------------------------*/ footer p.home { background-color: #0096d6; background-image: -webkit-linear-gradient(top, #0096d6, #008ac6); background-image: -moz-linear-gradient(top, #0096d6, #008ac6); background-image: linear-gradient(top, #0096d6, #008ac6); } footer p.home:before { background-position: 0 -110px; } footer p.services { background-color: #00b274; background-image: -webkit-linear-gradient(top, #00b274, #00a46b); background-image: -moz-linear-gradient(top, #00b274, #00a46b); background-image: linear-gradient(top, #00b274, #00a46b); } footer p.services:before { background-position: 0 -129px; } footer p.reachus { background-color: #d75ba2; background-image: -webkit-linear-gradient(top, #d75ba2, #c75496); background-image: -moz-linear-gradient(top, #d75ba2, #c75496); background-image: linear-gradient(top, #d75ba2, #c75496); } footer p.reachus:before { background-position: 0 -89px; } footer p.clients { background-color: #e9ac40; background-image: -webkit-linear-gradient(top, #e9ac40, #d89f3b); background-image: -moz-linear-gradient(top, #e9ac40, #d89f3b); background-image: linear-gradient(top, #e9ac40, #d89f3b); } footer p.clients:before { background-position: 0 -69px; }

 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://cdn.tutorialzine.com/misc/enhance/v2.js"></script> <div id="main"> <h1>slide-out footer.</h1> </div> <footer> <ul> <li> <p>Test</p> </li> <li> <p>Test</p> </li> <li> <p>Test</p> </li> <li> <p>Test</p> </li> </ul> </footer>

There is a very good article that explains z-indexes in detail, which I highly recommend that you read before continuing further.

Answer 3

Well, Here is a codepen for you that i found. https://codepen.io/cerebrovinny/pen/vYdJJVa

HTML:

Scroll down and say hello to the slide-out footer

<footer><p>Here i am. Ready to use me for navigation lists or other content.</p></footer>

CSS

* {margin:0; padding:0; font-family: Helvetica; font-weight:bold; font-size: 1.4em;text-align:center;}
    section {width:100%; height:1024px; margin: 0 0 360px 0;background-color:#ececec; position:relative; z-index:2; color: #1e2024;}
    footer {width:100%; height:360px;background-color:#262932; position:fixed; bottom:0; left:0; color: #ef4a4a; text-align:center; z-index:0;}
    p {padding: 1em 4em;}