Прокрутить показывать нижний колонтитул

Question

Я пытался использовать параллакс, чтобы скрыть и показать нижний колонтитул на прокрутке, но из-за того, что он нацелен на img, это не работает.

Я написал это, но он просто появляется, а не основная страница контента, скользящая вверх, чтобы медленно показывать нижний колонтитул.

SCRIPT

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

здесь любой пример: http://red-team-design.com/simple-and-effective-dropdown-login-box/

прокрутки вниз, чтобы увидеть колонтитула слайд из.

Есть ли чистый способ css сделать это? У меня здесь нет трюка. Спасибо за вашу помощь

скрипку https://jsfiddle.net/7uv2fzvp/2/

Answer 1

Демо на 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; 
 
} 
 

 

 
/*------------------------- 
 
\t 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>

Существует very good article, что объясняет Z-индексы в деталях, которые я настоятельно рекомендую вам прочитать, прежде чем продолжить дальше.

Answer 2

Да, это чистый CSS. Просто нужно положить, что position: fixed и z-index: 0, так как:

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

и основное содержание position: relative и z-index: 1

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

Вот jsFiddle: https://jsfiddle.net/7uv2fzvp/11/

Answer 3

Ну, вот код для вас, который я нашел. https://codepen.io/devkick/pen/Eaufm

HTML:

прокрутки вниз и поздороваться с выдвигающейся сноске

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