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

Question

我正在尝试为 header div（高度：100 像素；）制作动画，以便在用户向下滚动时移动到屏幕顶部.当它在顶部时，我想在那里修复它。当 div 移动到屏幕顶部时，它会越过 横幅 div（高度：400 像素；），我制作了 横幅 div 淡出取决于 header div 与顶部的距离。

当headerdiv固定在顶部且横幅div完全淡出我想向上滚动到 re-animate header div 以移回其原始位置（margin-top : 400;) 和 横幅 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;
});
}

更新 - 添加了一行代码以防止 'sticking' 在初始滚动之后：

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

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

on Scroll animate scrollTop to move div up and fix it

javascript

jquery

css

animation

fullpage.js