Пример маскируемого плавающего эффекта с помощью jQuery
Mashable, наиболее известный как веб-сайт ресурсов социальных сетей, создавал потрясающий эффект плавания при прокрутке страницы пользователем. Вот простая идея клонировать этот плавающий эффект с помощью jQuery.
Идея ...
-
Создайте плавающую коробку.
-
Начальное расположение плавающей коробки, поместите ее рядом с содержимым тела.
-
Пока пользователь прокручивает страницу, продолжайте проверять положение полосы прокрутки.
-
Если позиция полосы прокрутки y больше, чем позиция y плавающей рамки, динамически измените позицию y плавающей рамки.
-
Пока полоса прокрутки y меньше позиции плавающей рамки y, восстановите исходную позицию.
-
Используйте jQuery, конечно.
1. HTML-макет
Простая HTML-разметка, верхний и нижний колонтитулы, содержимое и нижний колонтитул, поместите div «плавающий ящик» над содержимым
header
content
Mashable floating effect example
2. Плавающая коробка 90 × 200
Это поле, которое будет плавно перемещаться, пока люди прокручивают поле. Возможно, вам придется немного отрегулировать“margin-left:-100px; ”в соответствии с вашими потребностями.
#floating-box{
width:90px;
height:200px;
border:1px solid red;
background-color:#BBBBBB;
float:left;
margin-left:-100px;
margin-right:10px;
position:absolute;
z-index:1;
}
3. Нет конфликтов, пожалуйста
Убедитесь, что jQuery не конфликтует с другой библиотекой. Очень рекомендую проверить это.
//avoid conflict with other script
$j=jQuery.noConflict();
$j(document).ready(function($) {
4. Позиция, позиция, должность
Свяжите событие jQuery scroll (), чтобы постоянно проверять положение полосы прокрутки браузера.
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css('position') == 'fixed';
if($floatingbox.length > 0){
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
Если положение y полосы прокрутки больше, чем положение y плавающего прямоугольника, измените положение y плавающего прямоугольника на «marginLeft: -500». Возможно, вам придется настроить это значение в соответствии с вашими потребностями.
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -500
});
}
Если полоса прокрутки y меньше, чем положение плавающей рамки y, восстановите исходное положение.
if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
5. Done
Попробуйте воспроизвести приведенный ниже пример, чтобы получить представление о работах.
P.S This floating effect feature is implemented in my DiggDigg WordPress plugin.