Я хочу Navbar нравится этот сайтHTML - выше Navbar прокрутка при прокрутке и становится меньше
навигационной панель следует прокручивать и становится меньше. Спасибо заранее.
Я хочу Navbar нравится этот сайтHTML - выше Navbar прокрутка при прокрутке и становится меньше
навигационной панель следует прокручивать и становится меньше. Спасибо заранее.
Этот навигатор выполнен с использованием 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;
}
Вот инструмент, который может помочь вам создать свои собственные замедления анимации:
Большое спасибо. Его помощь. –
@KoayHv Есть ли причина, по которой вы не приняли этот ответ? –
Вы сделана попытаться самостоятельно исследовать ответ? Взгляните на [эти советы] (http://stackoverflow.com/help/how-to-ask), задавая вопросы о SO. –
right click> inspect-element> follow stylesheets –
У меня есть поиск, но весь мой результат это, исправляя правило css, и он не может быть меньше. –