我有2个全高div.向下滚动页面时,一个div向上滚动,另一个向相反方向滚动.这很好用.
我试图保持这种效果,但在它下方放置正常的全宽度内容,同时试图保持自然滚动.所以我想保留替代滚动效果,但是当我到达使用此效果的最后一个div的底部时,我想继续正常滚动以查看其下方的正常内容.
这是我的jsFiddle,目前它浮动在我引用的效果上：http://jsfiddle.net/u9apC/116/并且JS粘贴在下面以供参考：
(function ($) {
var top = 0;
$(document).ready(function () {
var contentHeight = $('.right').height(),contents = $('.right > .content').length;
top = (0 - (contentHeight * (contents - 1)));
$('.right').css('top',top + 'px');
});
$(window).resize(function () {
var contentHeight = $('.right').height(),(top + $(window).scrollTop()) + 'px');
});
$(window).scroll(function () {
$('.right').css('top',(top + $(window).scrollTop()) + 'px');
});
})(jQuery);
编辑
这是我想要的例子：
解决方法
我希望这是你所追求的 – 从描述中可视化有点困难.
有一些技巧可以让这个工作：
>当右侧顶部变为正向时,反转滚动方向
>确保.row div的上边距足以将其向下推到左侧列的底部.
(function ($) {
var top = 0;
var contentHeight = 0;
$(document).ready(function () {
calcContentHeight();
});
$(window).resize(function () {
calcContentHeight();
});
$(window).scroll(function () {
setRightTop();
});
function calcContentHeight() {
var contents = $('.right > .content').length - 1;
contentHeight = $('.right').height() * contents;
top = 0 - contentHeight;
setRightTop();
}
function setRightTop() {
var rightTop = top + $(window).scrollTop();
//1. don't allow right col top to go positive
if(rightTop > 0) rightTop = 0 - rightTop;
$('.right').css('top',rightTop + 'px');
//2. Ensure .row has sufficient top margin
$('.row').css('margin-top',contentHeight + 'px');
}
})(jQuery);
请在此处查看更新的JSFiddle：http://jsfiddle.net/u9apC/126/
我还重构了你的代码以减少重复.
