我有一个按钮可以滑入或滑出多个div。单击按钮时,我希望按钮在单击时保持在窗口中的相同位置,但由于滑动div更改了按钮上方的高度,因此它最终会移动(请参阅小提琴以查看其外观:{{3 }})
我看过动画scrollTop
,但看不到如何以不会跳跃的方式使用它。有没有办法在动画发生时将滚动窗口锚定到元素?
谢谢!
答案 0 :(得分:0)
如果您动态更改div,则滚动也会调整。您的意图是按照说明保持按钮固定,因此我更新了您的fiddle以便工作。
点击时基本上按下positon:fixed
按钮。您当然可以选择将按钮固定在您的CSS中,而不是等待点击。
答案 1 :(得分:0)
这有点紧张,但这里有一个你可以建立的解决方案
当它处于运动状态时,我会轮询当前的滚动位置,并确保该按钮仍在同一位置。
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);
}
}
答案 2 :(得分:0)
我能够使用步骤回调函数来解决这个问题,最多是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;
步骤功能(每次动画迭代运行):
topOfElement = $(holdSpot).offset().top; //finds new position of element
$(window).scrollTop(topOfElement - effectiveHeight); //sets scrollTop to position of element minus the original height difference