导航栏滚动显示后具有过渡效果

MarekLajdák：

在网上是具有相对位置的基本水平导航面板，显示块。滚动超过150像素后，我可以使用JavaScript代码将其位置更改为固定。所以面板出现给用户...现在的问题：

我如何制作（淡入或滑入）过渡效果？

这里是小提琴：小提琴

CSS：

#navigation-panel {
  transition: all 1s linear;
}

Js：

$(window).scroll(function () {
    console.log($(window).scrollTop());
    if($(window).scrollTop() > 150) {
        $('#navigation-panel').css('opacity', 1);
        $('#navigation-panel').css('position', 'fixed');
        $('#navigation-panel').css('opacity', 0);

    } else {
        $('#navigation-panel').css('position', 'relative');
    }
});

我正在尝试在javascript中设置（在CSS中是过渡：全1；）：

不透明度0;
位置：固定
不透明度1

或类似的替代

margin-top -50px（面板高度为50px）;
位置：固定
边距：0;

但是过渡不起作用...

有什么建议么？

马克西姆·马祖罗克（Maxim Mazurok）：

这应该可以完成以下工作：

$(window).scroll(function () {
  if($(window).scrollTop() > 150) {
    $('#navigation-panel').css('position', 'fixed');
    $('#navigation-panel').css('top', 0);
  } else {
  $('#navigation-panel').css('position', '');
    $('#navigation-panel').css('top', '-100%');
  }
});

.container {
  height: 1000px;
}


#navigation-panel {
  transition: all 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navigation-panel">
  <ul id="main-menu">
    <li>
      <a href="#about-us" class="smooth-scroll">About us</a>
    </li>
    <li>
      <a href="#services" class="smooth-scroll">Services</a>
    </li>
    <li>
      <a href="#contact" class="smooth-scroll">Contact</a>
    </li>
  </ul>
</div>

<div class="container"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。