<html>
<head>
<style type="text/css">
#footershop {
height:0px;
width:100%;
z-index: 2;
background:#00ffff;
position: fixed;
bottom:0;
left:0;
overflow:visible;
float: left;
}
body {
position:relative;
}
#footerTopLine
{
height:35px;
width:100%;
z-index: 1;
background:#888;
position: fixed;
bottom:0;
left:0;
overflow:visible;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
var distanceTop = $('#showfootershop').offset().top - $(window).height();
if ($(window).scrollTop() >= distanceTop - 20) {
$("#footershop").animate({
'height': '35px'
}, 'fast');
}
else {
$("#footershop").animate({
'height': '0px'
}, 'fast');
}
});
</script>
<script type="text/javascript">
$(window).scroll(function() {
var distanceTop = $('#showfooterTopLine').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop) {
$("#footerTopLine").animate({
'height':'70px'
}, 'fast');
}
else {
$("#footerTopLine").animate({
'height':'35px'
}, 'fast');
}
});
</script>
</head>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. Curabitur posuere pellentesque erat vel ullamcorper. Nullam mauris erat, elementum et semper sed, lacinia quis orci. Curabitur ornare dapibus accumsan. Curabitur sollicitudin porttitor vulputate. Nullam ornare magna at justo sodales tristique. Pellentesque vel arcu felis, vel egestas turpis. Sed a libero nibh.</p> <br />
<p>
Nunc sagittis, nibh non blandit congue, diam est adipiscing purus, non volutpat nunc eros in sapien. Sed rutrum euismod dui eu posuere. Vestibulum sem purus, condimentum rhoncus auctor ut, ultrices at lectus. Nullam sodales nunc in erat pulvinar ac mattis arcu bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam lectus magna, facilisis sit amet gravida eu, ultricies vel justo. Cras tincidunt quam et sem sodales id luctus felis tempus. Curabitur dictum ultricies felis id ullamcorper.</p><br />
<p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p><br />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. Curabitur posuere pellentesque erat vel ullamcorper. Nullam mauris erat, elementum et semper sed, lacinia quis orci. Curabitur ornare dapibus accumsan. Curabitur sollicitudin porttitor vulputate. Nullam ornare magna at justo sodales tristique. Pellentesque vel arcu felis, vel egestas turpis. Sed a libero nibh.</p><br />
<p>Nunc sagittis, nibh non blandit congue, diam est adipiscing purus, non volutpat nunc eros in sapien. Sed rutrum euismod dui eu posuere. Vestibulum sem purus, condimentum rhoncus auctor ut, ultrices at lectus. Nullam sodales nunc in erat pulvinar ac mattis arcu bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam lectus magna, facilisis sit amet gravida eu, ultricies vel justo. Cras tincidunt quam et sem sodales id luctus felis tempus. Curabitur dictum ultricies felis id ullamcorper.</p><br />
Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.
</p><br />
<div id="showfooterTopLine"></div>
<div id="footerTopLine">
<h1>Shop Links</h1>
</div>
<div id="showfootershop"></div>
<div id="footershop">
<h1>Shop Links</h1>
</div>
<body>
</body>
</html>
Postoji super skript za to, pokusacu da ga nadjem sutra.
