在Scroll上为scrollTop设置动画以向上移动div并将其修复

Question

I am trying to animate a header div (height: 100px;) to move to the top of the screen when the user scrolls down. when it's at the top I'd like to fix it there. As the div moves to the top of the screen it passes over a banner div (height: 400px;), I have made the banner div fade out depending on how close the header div is to the top.

When the header div is fixed to the top and the banner div fully faded out I'd like an upward scroll to re-animate the header div to move back to it's original position (margin-top: 400;) and the banner div to fade back in.

I have created a JSFiddle of my code: https://jsfiddle.net/xm33Laag/

see JSfiddle

Although it's not working like my local version :S

I can get the header div to go to the top but I can't get it to come back down. I also want my animation to look like this example : http://alvarotrigo.com/fullPage/#firstPage

I don't want to simply use fullPage.js because I only want it for this function. I don't need the myriad options that come with including it.

with the above ideal example, you can see that a single scroll will initiate the animation, and there's no initial jerking before the animation starts. I really like this!

My animation will initiate after you scroll, meaning that the initial scroll makes the viewer view 100px of snappy scrolling, then the animation. I'd like it to be one.

Thanks!

Answer 1

So I had a go at what I get as the gist of it. Slightly changed the CSS, giving the main content below the top margin instead of .header . It was a bit easier to code it that way.

Here's the live example : http://codepen.io/anon/pen/azrwog?editors=001

And the JavaScript (changed that a lot) :

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

Another solution update - cross browser smooth, using the 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;
});
}

Update - one line of code added to prevent 'sticking' after the initial scroll :

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