Question

我正在尝试动画标题div （高度：100px;），以便在用户向下滚动时移动到屏幕顶部。如果它在顶部，我想在那里解决它。当div移动到屏幕顶部时，它会经过横幅div （高度：400px;），我已将 banner div 淡出，具体取决于接近的距离标题div 位于顶部。

当标题div 固定在顶部且横幅div 完全淡出时，我想向上滚动以重新设置的动画效果标题div 返回到它的原始位置（margin-top：400;）和 banner div 以淡入。

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

see JSfiddle

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

我可以将标题div 放到顶部，但我无法让它重新登场。我还希望我的动画看起来像这个例子：http://alvarotrigo.com/fullPage/#firstPage

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

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

我的动画将在您滚动后启动，这意味着初始滚动使查看器查看100px的snappy滚动，然后是动画。我希望它能成为一个。

谢谢！

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();

在滚动动画scrollTop上移动div并修复它

1 个答案: