修复了带有动画的导航栏[关闭]答案

【问题标题】：Fixed navbar with animation [closed]修复了带有动画的导航栏[关闭]
【发布时间】：2016-09-16 13:20:50
【问题描述】：

我正在尝试制作一个固定的导航栏，当你滚动时它会缩小一点，（像这样：http://themes.muffingroup.com/be/biker/）并且我已经修复了导航栏和所有内容，但我无法获得动画正常工作

谁能帮我入门？

谢谢！

【问题讨论】：

【解决方案1】：

应该超级简单@Christian。只需使用 jQuery lib 中的 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！询问您是否需要示例，发布您的代码。

【讨论】：

【解决方案2】：

当您滚动到定义的点时，导航栏会获得额外的类。例如，从您获得的网站：

收缩前

#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");
    }
});

【讨论】：