javascript - on Scroll animate scrollTop 向上移动 div 并修复它

Question

我正在尝试为 header div(高度:100 像素；)设置动画，以便在用户向下滚动时移动到屏幕顶部。当它在顶部时，我想在那里修复它。当 div 移动到屏幕顶部时，它会越过 banner div(高度:400 像素；)，我已经使 banner div 淡出，具体取决于header div 到顶部。

当 header div 固定在顶部并且 banner div 完全淡出时，我想要向上滚动以重新激活 header div 回到原来的位置 (margin-top: 400;) 和 banner div 淡入。

我已经为我的代码创建了一个 JSFiddle:https://jsfiddle.net/xm33Laag/

see JSfiddle

虽然它不像我的本地版本那样工作:S

我可以让 header div 到达顶部，但我无法让它返回下方。我也希望我的动画看起来像这个例子:http://alvarotrigo.com/fullPage/#firstPage

我不想简单地使用 fullPage.js，因为我只希望它用于此功能。我不需要随附的无数选项。

通过上面的理想示例，您可以看到单个滚动将启动动画，并且在动画开始之前没有初始抖动。我真的很喜欢这个!

我的动画将在您滚动后启动，这意味着初始滚动使查看器查看 100 像素的快速滚动，然后是动画。我希望它是一个。

谢谢!

Answer 1

所以我尝试了我得到的要点。稍微更改了 CSS，将主要内容放在上边距下方，而不是 .header。以这种方式编写代码要容易一些。

这是一个活生生的例子:http://codepen.io/anon/pen/azrwog?editors=001

还有 JavaScript(改变了很多):

var previous = 0, delta, initial = true, stopped;

$(window).scroll(function() {

clearTimeout(stopped);
var fromtop = $(window).scrollTop();
if (fromtop-previous > 0) delta = -1;
else delta = 1;
previous = fromtop;

if (fromtop < 400) {
var factor = 400-fromtop;
$('.banner').css({'height': factor, 'opacity': factor/400});
$('.header').removeClass('fixed');
if (delta == -1 && initial) firstScroll();
else if (delta == 1) scrollAction();
}
else $('.header').addClass('fixed');
});

function firstScroll() {
initial = false;
$('html, body').animate({scrollTop: 400}, 800);
}

function scrollAction() {stopped = setTimeout(function() {goTop()}, 200)}

function goTop() {
var topoffset = $(window).scrollTop();
$('html, body').animate({scrollTop: 0}, 2*topoffset, function() {
initial = true;
});
}

另一个解决方案更新 - 跨浏览器流畅，使用 mousewheel.js plugin :

http://codepen.io/anon/pen/jEoGxG?editors=001

var fromtop, initial = true, stopped;

$(window).mousewheel(function(turn, delta) {

if (!initial) $('html, body').finish();

$(window).scroll(function() {

clearTimeout(stopped);
fromtop = $(window).scrollTop();

if (fromtop <= 400) {
changeOpacity();
$('.header').removeClass('fixed');
if (delta == 1) scrollAction();
}
else $('.header').addClass('fixed');
});

if (initial) {
if (delta == -1) $('html, body').animate({scrollTop: 400}, 800, function() {
initial = false;
});
return false;
}
});

function scrollAction() {stopped = setTimeout(function() {goTop()}, 200)}

function changeOpacity() {
var factor = 400-fromtop;
$('.banner').css({'height': factor, 'opacity': factor/400});
}

function goTop() {
var topoffset = $(window).scrollTop();
$('html, body').animate({scrollTop: 0}, 2*topoffset, function() {
initial = true;
});
}

更新 - 添加一行代码以防止在初始滚动后“粘住”:

if (!initial) $('html, body').finish();