css - HTML - 当用户滚动并变小时，上面的导航栏滚动

Question

我想要这个网站的导航栏

例子

导航栏随着用户滚动而变小。提前致谢。

Answer 1

这个导航栏是用 javascript 和 jquery 完成的。

他们正在使用 .scrollTop jquery 方法来添加类 .min （具有较小的高度属性）和 CSS easing 以使过渡更平滑。

这是他们正在使用的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/