[英]Move a div horizontally and then vertically
我在这里举例说明了我拥有的东西: http : //jsfiddle.net/jewb/tM5h7/4/
我的脚本看起来像这样:
var minHeight = $(window).scrollTop();
var maxHeight = $(window).height();
var middleHeight = (maxHeight + minHeight) / 2;
$(window).scroll(function () {
var positionTopDiapo = $('#diaporama').offset().top;
var hauteurDivDiapo = $('#diaporama').height()/2;
var positionTop = $('#frame').offset().top;
var hauteurDiv = $('#frame').height()/2;
var positionY = positionTop + hauteurDiv - $(window).scrollTop();
var positionYDiapo = positionTopDiapo + hauteurDiv - $(window).scrollTop();
var bottomDiapo = (positionTopDiapo - $(window).scrollTop()+ $('#diaporama').height());
var bottomFrame = (positionTop - $(window).scrollTop()+$('#frame').height());
var window_width = $(window).width() - $('#frame').width();
var document_height = $('#diaporama').height() - $('window').height();
var scroll_position = $(window).scrollTop();
var object_position_left = window_width * (scroll_position / document_height);
$('#frame').css({'left': object_position_left });
if(positionYDiapo<=middleHeight){
$('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'});
if(bottomDiapo<=bottomFrame){
$('#frame').css({ 'position': 'absolute' });
$('#frame').css({ 'bottom': '0px' });
$('#frame').css({ 'top': 'auto' });
}
} else{
$('#frame').css({position:'absolute', top:'0px', bottom:'auto'});
$('#frame').css({ 'left': '0px' });
}
这是问题所在。 首先, #frame
的位置是absolute, top:0px;
#diaporama
到达窗口的中间时,我需要固定#frame
位置。 固定#frame
,我需要它从左向右滚动。 我需要在#frame
底部到达页面中间的#diaporama
到达#diaporama
。 当到达末尾时, #frame
的位置为绝对位置, bottom:0px;
然后,我继续滚动到文档末尾。 如果我向上滚动,它将反向执行相同的操作。
到目前为止,这是我所做的: jsfiddle
var scroll_position = $(window).scrollTop(),
d = $('#diaporama').get(0).scrollHeight,
c = $('#diaporama').get(0).scrollWidth,
scrollPercent = (scroll_position / (d+c));
var position = (scrollPercent * - $('#frame').width())+positionTopDiapo;
var positionGauche = $('#frame').offset().left;
var tarif = $('#tarif').offset().top - $(window).scrollTop();
当我向左移动时,会出现一些小故障,但总体而言,这非常好。 如果有人可以改进代码,请告诉我。 我把这段代码用来帮助其他会有相同问题的人。 对于拥有相同问题的其他人来说,这可能是一个开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.