Как мне правильно написать такой jQuery скрипт?

Question

[Петр Волханов]

Мне нужно написать такой jQuery скрипт:

Когда посетитель прокручивает страницу сайта вниз, в шапке исчезает все, кроме главного меню, а когда прокручивает в самый верх шапка опять полностью появляется.

Вот, что есть на данный момент:

jQuery(document).ready(function($) {
    jQuery(window).scroll(function() {
        jQuery("#header").not('#header_main_alternate').hide('slow');
    })
})

Почему-то, несмотря, на .not('#header_main_alternate') прячется вся шапка. Помогите, пожалуйста, дописать скрипт!

Answer 1

[Хазрат Гаджикеримов]

Смотри в сторону готовых решений, вот одно из низ.
+ вот это
и еще один
это тоже, че мелочиться вот тут смотри сразу www.unheap.com

Answer 2

[Ваге]

Попробуем сделать так я приведу такой пример

HTML

<header></header>
<main>
  <script> 
    for(var i = 0; i < 40; i++){ 
    document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); 
    }
</script>
</main>
<footer></footer>

CSS

body {
    padding-top: 40px;
}

header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up {
    top: -40px;
}

main {
   background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
   ) repeat;
    height: 2000px;
}

И наконец jQuery

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Убедитесь, что они прокрутки более чем на дельте
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // Если они прокручиваются вниз и мимо навигационной панели, добавить класс .nav-up.
    // Это необходимо, чтобы вы никогда не увидите, что "за" навигационной панели.
    if (st > lastScrollTop && st > navbarHeight){
        // Прокрутка вниз
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Прокрутка вверх
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

Answer 3

[Петр Волханов]

Вот, что у меня получилось:

jQuery(document).ready(function($) {
	var scrollTop = $(window).scrollTop();
  	var headerHeight = $("#header").height();
  	$(window).scroll(function() {
  		if ($(this).scrollTop()>= headerHeight) { 
    		// header just passed
    		$(".logo, .social_bookmarks, .phone-info, #header_main>.container, #header_meta").fadeOut('slow');
  		}
  		else{
  			$(".logo, .social_bookmarks, .phone-info, #header_main>.container, #header_meta").fadeIn('fast');
  		}
  	})
})