滚动后带有过渡效果的导航栏显示答案

【问题标题】：Navbar show after scroll with transition effect滚动后带有过渡效果的导航栏显示
【发布时间】：2020-08-13 11:33:06
【问题描述】：

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

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

这里是小提琴：fiddle

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；

但过渡不起作用...

有什么建议吗？

【问题讨论】：

您可以创建一个带有缓入过渡的新 CSS 样式，并在滚动超过 150 像素时应用它；你也可以撤销它。
我很确定你想要this这样的东西。
是的，但是如果导航栏在加载时 css 不透明度为 0，情况就不同了...在 css 过渡和 js 不透明度 1 中很容易设置...我的观点是面板在加载时不透明度1...看小提琴...我需要在滚动和显示面板后淡入淡出（此时在页面顶部可见）...

标签： javascript html css css-transitions effects

【解决方案1】：

这应该可以完成工作：

$(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>

【讨论】：

谢谢！这正是我所需要的。
@LajdákMarek 你想让我也创建一个淡入淡出效果吗？
是的，我对此很感兴趣......我将不胜感激