Доработать скрипт скролинга.
Здраствуйте. Есть скрипт плавающего блока на jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
var offset = $("#fixed").offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#fixed").stop().css({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {$("#fixed").stop().css({marginTop: 0});};});
});
</script>
Помогите дописать так что бы блок останавливался при подходе к другому блоку, например <div id="footer">. Заранее благодарен! |
Spasatel801,
Выложите HTML данного "плавающего" блока и его обрамления - и обрамление <div id="footer"> вместе с ним и обоюдное общее родительским обрамлением этих элементов |
вот HTML разметка страницы:
<body id="top">
<table border="0" cellpadding="0" cellspacing="0" width="1100px" valign="top">
<tr valign="top">
<!--Левая колонка-->
<td width="240px" valign="top">
<div class="section-left">
<div class="vip-block">
Какой то блок №1
</div>
<div class="vip-block">
Какой то блок №2
</div>
<div class="vip-block">
Какой то блок №3
</div>
<div class="section-title"> Вот это не подвижная часть </div>
<div class="section-content">
<div id="fixed">
Вот эта часть чтобы двигалась доходила либо до <div id="footer"> но желательно чтоб до <div id="dashboard">
</div>
</div>
</div>
</td>
<!--Центральная колонка-->
<td width="580px" id="center-sidebar" valign="top">
Вот здесь находиться основной контент
</td>
<!--Правая колонка-->
<td width="240px" valign="top">
Вот здесь контент правой колонки
</td>
</tr>
</table>
<!--// footer -> //-->
<div class="clearer"> </div>
<div id="dashboard">
вот здесь ка бы идет навигационный блок
</div>
<div id="footer">
Нижняя часть сайта
</div>
</body>
и вот CSS блоков :
/* Dashboard */
#dashboard {
border: 1px solid #E7E7E7;
padding: 14px 16px;
background: #F6F6F6;
margin-top: 20px;
text-align: left;
}
#dashboard a {color: #456; text-decoration: none;}
#dashboard a:hover {color: #000; text-decoration: underline;}
/* Footer */
#footer {padding: 10px 0;}
#footer a {
color: #579;
text-decoration: none;
}
#footer .right, #footer .right a {
color: #999;
text-decoration: none;
}
#footer .text-separator {
padding: 0 3px;
color: #BBB;
}
#footer a:hover {color: #000;}
#fixed {position: absolute}
|
Ок - к завтра гляну
|
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
body {
padding-top:100px;
height:3000px;
}
.section-left .section-content{
/* фиксируем высоту при выезде блока #fixed */
height:57px;
}
/* Dashboard */
#dashboard {
margin-top:430px; /*Отступ для теста*/
border: 1px solid #E7E7E7;
padding: 14px 16px;
background: #7EFFBC;
/*margin-top: 20px;*/
text-align: left;
}
#dashboard a {
color: #456;
text-decoration: none;
}
#dashboard a:hover {
color: #000;
text-decoration: underline;
}
/* Footer */
#footer {
padding: 10px 0;
border:1px red solid;
#CEFFC9;
}
#footer a {
color: #579;
text-decoration: none;
}
#footer .right, #footer .right a {
color: #999;
text-decoration: none;
}
#footer .text-separator {
padding: 0 3px;
color: #BBB;
}
#footer a:hover {
color: #000;
}
#fixed {
width: 247px;
position: absolute;
z-index:1000;
background: #B4B4FA;
}
#fixed.Fixed {
position: fixed;
z-index:1000;
top:19px;
transition-property:top;
-webkit-transition-property:top;
-moz-transition-property:top;
-o-transition-property:top;
-ms-transition-property:top;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-ms-transition-duration: 0.4s; /* IE9+ */
}
</style>
</head>
<body id="top">
<table border="1" cellpadding="0" cellspacing="0" width="1100px" valign="top">
<tbody>
<tr valign="top">
<!--Левая колонка-->
<td width="240px" valign="top">
<div class="section-left">
<div class="vip-block">
Какой то блок №1
</div>
<div class="vip-block">
Какой то блок №2
</div>
<div class="vip-block">
Какой то блок №3
</div>
<div class="section-title"> Вот это не подвижная часть </div>
<div class="section-content">
<div id="fixed">
Вот эта часть чтобы двигалась доходила либо до но желательно чтоб до
</div>
</div>
</div>
</td>
<!--Центральная колонка-->
<td width="580px" id="center-sidebar" valign="top">
Вот здесь находиться основной контент
</td>
<!--Правая колонка-->
<td width="240px" valign="top">
Вот здесь контент правой колонки
</td>
</tr>
</tbody>
</table>
<!--// footer -> //-->
<div class="clearer"> </div>
<div id="dashboard">
dashboard навигационный блок
</div>
<div id="footer">
Нижняя часть сайта
</div>
<script type="text/javascript">
$(function() {
var TopOld = $("#fixed").offset().top;
var MaxBottom = $("#dashboard").offset().top - parseInt($("#fixed").height()); //&&
var Delta = 19; //начало движения не доходя до верха;
var Busy = false; //Занят обработкой;
$(window).scroll(function() {
if ( Busy ) { return false;}
Busy = true; // Занят;
var ThisTop = $("#fixed").offset().top;
var Scroll = $(window).scrollTop();
if (Scroll > (TopOld-Delta) && ThisTop < MaxBottom ){
$("#fixed").addClass('Fixed');
} else $("#fixed").removeClass('Fixed');
if (Scroll > MaxBottom) $("#fixed").removeClass('Fixed');
Busy = false; //Освободилсяж
});
});
</script>
</body>
</html>
|
Спасибо я попробую, сейчас на работу просто ) как приду внедрю и отпишусь как получилось )
|
Deff спасибо огромное все внедрил, то что надо просто )
|
| Часовой пояс GMT +3, время: 15:07. |