Есть центральный блок контента и есть правый сайдбар. Необходимо замедлить прокрутку правого сайдбара на величину разницы их высот. Прокрутка обоих блоков должна заканчиваться в одном и том же месте, "приходить к финишу" одновременно
$(document).ready(function(){
var content_height = $('.content').height(); // получаем высоту контента
var sidebar_height = $('.sidebar').height(); // получаем высоту сайдбара
var slow_ratio = Math.round(parseInt(content_height)/parseInt(sidebar_height)); //рассчитываем коэффициент замедления
if(slow_ratio > 1){
// если разница больше 1, то нужно замедлить прокрутку $('.sidebar') в slow_ratio раз, то есть оба блока должны "приходить к финишу" одновременно, так сказать
}
});
Ответ
Используй data-scroll-speed в нужном блоке. Соотношение высот блоков сам подсчитай.
Пример:
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.onscroll = function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}
}
var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop){
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + -pos + 'px)');
};
$(function(){
$('[data-scroll-speed]').moveIt();
});
.content {
height: 3000px;
}
.wrapper {
position: fixed;
}
.wrapper .box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 160%;
color: #fff;
position: absolute;
background: #ff8330;
}
.wrapper .box:nth-of-type(2) {
left: 100px;
background: #E01B5D;
}
.wrapper .box:nth-of-type(3) {
left: 200px;
background: #30FFFF;
}
.wrapper .box:nth-of-type(4) {
left: 300px;
background: #B3FF30;
}
.wrapper .box:nth-of-type(5) {
left: 400px;
background: #308AFF;
}
.wrapper .box:nth-of-type(6) {
left: 500px;
background: #1BE059;
}
Пример добавления атрибута средствами javascript
document.getElementsByID("your-block").setAttribute("data-scroll-speed", "your-value");
Комментариев нет:
Отправить комментарий