在Scroll上為scrollTop設置動畫以向上移動div並將其修復

Question

我正在嘗試設置標題div的動畫（高度：100px;），以便當用戶向下滾動時移動到屏幕頂部。 當它在頂部時，我想在那里修復它。 當div移至屏幕頂部時，它越過了橫幅div （高度：400像素；），我根據標題div與頂部的接近程度使橫幅div淡出。

當標題div固定在頂部並且橫幅div完全消失時，我想向上滾動以重新設置標題div的動畫，以移回其原始位置（margin-top：400；），並將橫幅div移至淡入。

我已經創建了我的代碼的JSFiddle： https ：//jsfiddle.net/xm33Laag/

see JSfiddle

雖然它不像我的本地版本那樣工作：S

我可以將標頭div移到頂部，但無法將其調低。 我也希望我的動畫看起來像這個例子： http : //alvarotrigo.com/fullPage/#firstPage

我不想簡單地使用fullPage.js，因為我只希望它用於此功能。 我不需要包含它的眾多選擇。

在上面的理想示例中，您可以看到單個滾動將啟動動畫，並且在動畫開始之前沒有初始的抽動。 我真的很喜歡這個！

我的動畫將在您滾動后啟動，這意味着初始滾動使查看者觀看100px的快速滾動，然后是動畫。 我希望成為一個。

謝謝！

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插件可使瀏覽器流暢運行：

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