Я привел здесь пример того, что у меня есть: 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;
позицию absolute, top:0px;
Когда #diaporama
достигает середины окна, мне нужно зафиксировать положение # #frame
. Когда #frame
исправлено, мне нужно прокручивать его слева направо. Мне нужно дойти до конца #frame
в то время как дно #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();
есть некоторый сбой, когда я отдаю левую позицию, но в целом это довольно хорошо. Если кто-то может улучшить код, просто скажите мне. Я поставил этот код, чтобы помочь другим, у кого будет такая же проблема. Это может быть началом для других, у кого такая же проблема, моя.