2013-08-25 10 views
-1

Я хочу Navbar нравится этот сайтHTML - выше Navbar прокрутка при прокрутке и становится меньше

Example

навигационной панель следует прокручивать и становится меньше. Спасибо заранее.

+0

Вы сделана попытаться самостоятельно исследовать ответ? Взгляните на [эти советы] (http://stackoverflow.com/help/how-to-ask), задавая вопросы о SO. –

+0

right click> inspect-element> follow stylesheets –

+0

У меня есть поиск, но весь мой результат это, исправляя правило css, и он не может быть меньше. –

ответ

2

Этот навигатор выполнен с использованием javascript и jquery.

Они используют метод jquery .scrollTop, чтобы добавить класс .min (который имеет свойства меньшей высоты) и CSS, облегчая переход.

Вот код javascript, который они используют.

$(document).ready(function() { 
    $('.main-nav').css('display', 'none'); 
$('.menu-toggle').click(function() { 
    $('.main-nav').slideToggle('medium'); 
}); 
//Relevant Code Starts Here 
$(window).scroll(function(){ 
      // If the scroll bar is at the position of 30px or less 
    if($(window).scrollTop() <= 30){ 
      //Remove the css class of min - this is where the page starts 
     $('.top-nav').removeClass('min') 
    }else{ 
      //Add the css class of min 
     $('.top-nav').addClass('min') 
    } 
}); 
}); 

Вот CSS они используют для ослабления:

.top-nav{ 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    -ms-transition: all 0.2s ease; 
    transition: all 0.2s ease; 
} 

Вот инструмент, который может помочь вам создать свои собственные замедления анимации:

http://matthewlein.com/ceaser/

+0

Большое спасибо. Его помощь. –

+0

@KoayHv Есть ли причина, по которой вы не приняли этот ответ? –

Смежные вопросы