javascript - Bootstrap 中的自适应徽标

问题描述

我对标志的管理有一点问题。我有默认为白色的徽标，当您滚动它时它会变为黑色并且它可以工作。问题是当它变得响应时，徽标总是以白色开头，并且白色导航栏不可见。我怎样才能做到这一点，当它变得响应时，另一个徽标会直接启动。我正在使用 Bootstrap。多谢

// JavaScript Document
(function($) {
  "use strict";



  // Collapse Navbar 
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink")
      $(".logo").attr("src", "https://www.orticaweb.it/wp-content/uploads/2019/09/Twitter-00-Logo-Nero.png");

    } else {
      $("#mainNav").removeClass("navbar-shrink")
      $(".logo").attr("src", "https://loghi-famosi.com/wp-content/uploads/2020/04/Twitter-Logo-650x366.png");

    }
  };
  // Collapse now if page is not at top 
  navbarCollapse();
  // Collapse the navbar when page is scrolled 
  $(window).scroll(navbarCollapse);






  // Smooth scrolling using jQuery easing 
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (
      location.pathname.replace(/^\//, "") ==
      this.pathname.replace(/^\//, "") &&
      location.hostname == this.hostname
    ) {
      var target = $(this.hash);
      target = target.length ?
        target :
        $("[name=" + this.hash.slice(1) + "]");
      if (target.length) {
        $("html, body").animate({
            scrollTop: target.offset().top - 70,
          },
          1000,
          "easeInOutExpo"
        );
        return false;
      }
    }
  });

})(jQuery);

@charset "UTF-8";

/* CSS Document */

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  height: 200vh;
  text-align: center;
  background-color: black;
  letter-spacing: 0.0625em;
}

#mainNav {
  min-height: 3.5rem;
  background-color: #fff;
}

#mainNav .navbar-toggler:focus {
  outline: none;
}

#mainNav .navbar-nav .nav-item:hover {
  color: #303F9F;
  outline: none;
  background-color: transparent;
}

#mainNav .navbar-nav .nav-item:active,
#mainNav .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent;
}

#mainNav .navbar-brand {
  color: #303F9F;
  font-weight: 500;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    padding: 0.5rem 0;
    color: white;
  }
  #mainNav .nav-link {
    transition: none;
    padding: 2rem 1.5rem;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
  }
  #mainNav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
  }
  #mainNav .nav-link:active {
    color: #303F9F;
  }
  #mainNav.navbar-shrink {
    background-color: white;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #303F9F;
  }
  #mainNav.navbar-shrink .nav-link {
    color: #303F9F;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link:hover {
    color: #7286CC;
  }
  #mainNav.navbar-shrink .nav-link:active {
    color: #303F9F;
    outline: none;
    border-bottom: 0.25rem solid #303F9F;
  }
}

@media (max-width: 992px) {
  #mainNav .link-collapse {
    color: #303F9F;
    font-weight: 400;
  }
  #mainNav .link-collapse:hover {
    color: #7286CC;
    font-weight: 400;
  }
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>index</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>



<body>
  <nav id="mainNav" class="navbar navbar-expand-lg navbar-light amber lighten-4 fixed-top">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#home"><img class="img-fluid logo" src="https://loghi-famosi.com/wp-content/uploads/2020/04/Twitter-Logo-650x366.png" width="50px">Logo Agency</a>


      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="toggle navigation">MENU<i class="fas fa-bars"></i></button>



      <div id="navbarResponsive" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">

          <li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example</a></li>
          <li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example1</a></li>
          <li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example2</a></li>
          <li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example3</a></li>


        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

标签： javascripthtmlcsstwitter-bootstrap

javascript - Bootstrap 中的自适应徽标

问题描述

解决方案

推荐阅读