修复带有动画的导航栏

Question

我正在尝试制作一个固定的导航栏，当你滚动时它会缩小一点，（类似这样的东西：http://themes.muffingroup.com/be/biker/）我已经固定了导航栏和所有东西，但我做不到让动画正常工作

谁能帮我入门？

谢谢！

Answer 1

当您滚动到定义的点时，导航栏会变得额外 class。您从站点获得的 E.G：

收缩前

#Top_bar {
    position: absolute;
    left: 0;
    top: 61px;
    width: 100%;
    z-index: 30;
    transition:

收缩后（滚动到某个点）：

#Top_bar.is-sticky {
     position: fixed!important;
        width: 100%;
        left: 0;
        top: -60px;
        height: 60px;
        z-index: 701;
        background: #fff;
        opacity: .97;
        filter: alpha(opacity = 97);
        -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
        -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);

}

您还需要一些类似于此的 jquery 代码：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 100) {
        $("#Top_bar").addClass("is-sticky");
    } else {
        $("#Top_bar").removeClass("is-sticky");
    }
});

Answer 2

应该超级简单@Christian。只需使用 jQuery 库中的 offset() 和 scrollTop() 函数（如果可以的话）。

$(document).ready(function() {
  var NavTop = $('.nav').offset().top;
  var Nav = function() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > NavTop) { 
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky'); 
    }
  };

Nav();

  $(window).scroll(function() {
    Nav();
  });
});

关于动画——过渡应该做到 trick！询问您是否需要示例，post 您的代码。

修复带有动画的导航栏

Fixed navbar with animation

html

css

animation

fixed

nav