|
блок замирающий над футером
zava75,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
height: 2000px;
padding: 0;
margin: 0;
}
#fixed{
height: 50px;
width: 100%;
top: 40px;
position: absolute;
background-color: #A9A9A9;
border-bottom: 3px solid #FF00FF;
}
#Footer{
background-color: #8FBC8B;
width: 100%;
height: 1500px;
position: absolute;
bottom: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
var offset = $('#fixed').offset().top;
var height = $('#fixed').outerHeight(true);
var offsetFooter = $('#Footer').offset().top - height;
var topPadding = 0;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var top = Math.min(offsetFooter, scroll + offset);
$('#fixed').stop().animate({top: top});
});
});
</script>
</head>
<body>
<div id="fixed">fixed</div>
<div id="Footer">Footer</div>
</body>
</html>
Последний раз редактировалось рони, 30.12.2018 в 02:30.
|