Question

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

有人能让我开始吗？

谢谢！

Answer 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！询问您是否需要示例，发布您的代码。

Answer 2

当您滚动到定义的点时，导航栏会获得额外的课程。来自网站的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");
    }
});

修复了带动画的导航栏

2 个答案: