JQuerry функция
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 55) {
#elem1 - display: none;
#elem2 - display: block;
}
else {
Наоборот
}
});
});
Тут я не знаю как вставить CSS код в JS, пусть кто-нибудь подскажет, но идея такая. Вместо 55 вставишь другое число (разница между высотой большого и компактного меню в пикселях)