Question

我想要这个网站的导航栏

导航栏跟随用户滚动并变小。提前谢谢。

Answer 1

此导航栏使用javascript和jquery完成。

他们使用.scrollTop jquery方法添加类.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/

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

1 个答案: