时间戳

首页 > 解决方案 > 为什么我的 Boostrap 导航栏 scfroll 动画不起作用？

javascript - 为什么我的 Boostrap 导航栏 scfroll 动画不起作用？

问题描述

我一直在尝试通过使用 CSS 和 Javascript 切换类来为我使用 Bootstrap4 制作的导航栏设置动画。但无论如何，该脚本似乎根本不起作用。我在下面添加必要的片段：

  1. HTML

        <!--NAVBAR-->
       <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark ">
  <a class="navbar-brand ml-4 mt-3px-4" href="#">MR BLUE. </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse navbar-right" id="navbarSupportedContent">
    <ul class="navbar-nav pr-5 ml-auto mt-3">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
     ....so on
   <!--NAVBAR-->

    2. CSS 类

     .bg-dark{
 background: transparent !important;

}
.bg-dark.scrolled{
 transition: 750 ease;
 background: #000000!important;

}
    1. Javascript
      <script>
       $(window).scroll(function(){
           $('nav').toggleClass('scrolled',$(this).scrollTop>1080);
       });
   </script>

导航栏保持透明。任何有关此问题的帮助将不胜感激。

标签： javascripthtmlcsstwitter-bootstrap

解决方案

scrollTop 是一个函数。当我添加括号时它对我有用

  $(window).scroll(function(){
           $('nav').toggleClass('scrolled',$(this).scrollTop()>1080);
       });

您在 CSS 中的过渡缺少时间单位。750什么？秒？毫秒？用于s秒和ms毫秒。

推荐阅读