Удерживать положение прокрутки на слайде?

Question

У меня есть кнопка, которая перемещает несколько разделов в или из. При нажатии кнопки я хочу, чтобы кнопка оставалась в том же положении в окне, когда она нажата, но так как скользящий div меняет высоту над кнопкой, она заканчивает движение (см. Скрипту, чтобы посмотреть, как это выглядит: http://jsfiddle.net/fJWeQ/3/)

Я искал анимацию scrollTop, но не вижу, как использовать ее таким образом, чтобы это не было нервным. Есть ли способ привязать окно прокрутки к элементу во время анимации?

Спасибо!

Answer 1

Я смог использовать функцию обратного вызова шага, чтобы исправить это, что не более 1px. Немного информации, если кто-то наткнулся на это:

Некоторая информация о том, как использовать функции обратного вызова шага, - here. На каждой итерации анимации выполняется функция обратного вызова.

До анимации:

holdSpot = this; //can set to whatever element you want to hold it at 
topOfElement = $(holdSpot).offset().top; 
topOfScroll = $(window).scrollTop(); 
effectiveHeight = topOfElement - topOfScroll; 

функция Step (работает на каждой итерации анимации):

topOfElement = $(holdSpot).offset().top; //finds new position of element 
$(window).scrollTop(topOfElement - effectiveHeight); //sets scrollTop to position of element minus the original height difference 

Answer 2

Если вы динамически изменяете div, прокрутка также будет регулироваться. Ваше намерение состоит в том, чтобы держать кнопку фиксированной, как вы заявили, поэтому я обновил ваш fiddle, чтобы работать как таковой.

По существу, при нажатии кнопки positon:fixed. Вы можете, конечно, выбрать, чтобы кнопка была зафиксирована в вашем css, и не дождаться щелчка.

Answer 3

Это немного поволноваться, но вот решение, которое вы могли бы построить на

http://jsfiddle.net/fJWeQ/5/

В то время как в движении я опрашивать текущее положение прокрутки и убедитесь, что кнопка все еще находится в то же место.

var togglesInMotion = 0; 
var buttonOffset; 
var intervalHandler; 
$(document).ready(function() { 
    $("#toggleButton").click(function(){   
     buttonOffset = $(this).offset().top - $(window).scrollTop();   
     intervalHandler = setInterval(function(){    

      var curOffset = $('#toggleButton').offset().top - $(window).scrollTop();   
      var adjustment = curOffset - buttonOffset; 

      var currentScrollPosition = $(window).scrollTop(); 
      $(window).scrollTop(currentScrollPosition + adjustment); 
      //$(window).scrollTop(0); 
     });   
     togglesInMotion++; 
     $('#div1').slideToggle("slow", stopScrolling); 
     togglesInMotion++; 
     $('#div3').slideToggle("slow", stopScrolling);     
    });  
}); 
function stopScrolling(){  
    togglesInMotion--; 
    if(togglesInMotion == 0){ 
     clearTimeout(intervalHandler);   
    } 
}