Фиксировать Sidebar при прокрутке страницы jQuery
Добрый день, может кто знает я зафиксировал блок #fixed как правильно прописать остановку при появлении блока футера #Footer в if я так понимаю?
$(document).ready(function () {
// var offsetFooter = $('#Footer').offset();
var offset = $('#fixed').offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top ) {
$('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
$('#fixed').stop().animate({marginTop: 0});
}
});
});
|
блок замирающий над футером
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>
|
Спасибо! за помощь!!! Так как вы сделали не получилось, как сайт на ворд пресс + тема нельзя использовать стили с значениями position: absolute;
Решил так, выкинул анимацию , не знаю работает но правильно код написал.?
$(document).ready(function () {
var height = $('#fixed').outerHeight(true);
var offsetFooter = $('#Footer').offset().top - height;
var offset = $('#fixed').offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top && $(window).scrollTop() < offsetFooter - height ) {
$('#fixed').css({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
$('#fixed').css({marginTop: 0});
}
});
});
|
| Часовой пояс GMT +3, время: 15:28. |