Temat dość niezrozumiały, ale poszukuję jakiegoś tutorialu w którym wyjaśniona by została budowa takiego topu strony jak tutaj:
Gdy jesteśmy na górze strony top jest inny niż przy przewijaniu.
0
0
Podpięcie się pod event scrollowania + odpowiednia manipulacja stylami, z ich plików JS:
$(window).scroll( function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 40 ){
$('.header_top').stop().animate({
top: '-62',
opacity: 1
}, 100, function() {
// Animation complete.
$('.second_logo').show().stop().animate({
width: '52'
}, 100, function() {
$('.second_logo img').fadeIn(100);
});
});
$('.logo, .social').hide();
$('#nav_top').css('padding-top', '78px');
$('.scroll_top, .next_prev_nav').fadeIn(500);
}else{
$('.header_top').stop().animate({
top: '0',
opacity: 1
}, 100, function() {
// Animation complete.
});
$('.logo, .social').show();
$('.scroll_top, .next_prev_nav').fadeOut(50);
$('#nav_top').css('padding-top', '0px');
$('.second_logo img').css('display','none');
$('.second_logo').stop().animate({
width: '0'
});
}
if ( scrollVal > 40 ){
$(".header_top").hover(function() {
$('.header_top').stop().animate({
opacity: 1
});
}, function () {
$('.header_top').stop().animate({
opacity: 1
})
});
}
});
$('.scroll_top').click(function(){
$('html, body').animate({
scrollTop: $("body").offset().top}, 700);
});