Question

我希望有人可以帮助我，我希望导航栏的滚动更改徽标的图像。

我是新手，但很固执，我在网上尝试寻找相似的东西，但出于我的目的，我找不到任何东西。

我只想更改滚动条上的徽标图像。

$(document).scroll(function() {
  if ($(this).scrollTop() >= 30) {
    $(" .brand-logo").html("<img src='img/edizioni-white.png'>");
  } else {
    $(".brand-logo").html("<img src='img/edizioni-black.png'>");
  }
});

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 84px;
  width: 100%;
  background-color: #fff;
  padding: 20px 18px;
  transition: background-color 0.4s ease-out;
}

nav#navbar {
  height: 95px;
}

nav.scroll {
  background-color: #000 !important;
  height: 95px;
  transition: background-color 1000ms;
  color: #fff !important;
}

a.color-font-menu {
  color: black;
  font-size: 20px;
}

nav.scroll a {
  color: white;
}

.brand-logo img {
  height: auto;
  width: 130px!important;
  margin-top: -20px;
}

.box {
  height: 500px;
  margin-top: 100px;
}

.box.orange {
  margin-top: 200px;
}

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">

<!--Import materialize.css-->
<link href="../materialize/core/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- Let browser know website is optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <!--JavaScript at end of body for optimized loading -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../materialize/core/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- scrolling change logo -->
  <script type="text/javascript" src="js/script.js"></script>

  <nav id="navbar">


    <div class "container">
      <a href="#!" class="brand-logo">
        <img src="img/edizioni-black.png">
      </a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down ">
        <li><a class="color-font-menu" href="#">Home</a></li>
        <li><a class="color-font-menu" href="#">Blog</a></li>
        <li><a class="color-font-menu" href="#">Video</a></li>
        <li><a class="color-font-menu" href="#">About</a></li>
        <li><a class="color-font-menu" href="#">Contact</a></li>
        <li><a class="color-font-menu" href="#">Chi siamo</a></li>
      </ul>
    </div>
    <!-- end container -->

  </nav>


  <ul class="sidenav " id="mobile-demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Chi siamo</a></li>
  </ul>

  <div class="container">
    <div class="box orange"></div>
    <div class="box purple"></div>
    <div class="box blue"></div>
    <div class="box orange"></div>
    <div class="box blue"></div>
  </div>

Answer 1

在MODO有趣的游戏中。

 <script>   $(document).scroll(function() {

  if ($(this).scrollTop() >=30) {

    $("#navbar .brand-logo").html("<img src='img/edizioni-white.png'>");
	} else {

    $("#navbar .brand-logo").html("<img src='img/edizioni-black.png'>");
  }

});
</script>

Answer 2

尝试这种jQuery方法怎么样？我已经编写了一个清晰的代码段，展示了如何使用jQuery滚动更改图像。这应该可以帮助您。

$(document).ready(function() {
  $(window).on("scroll", function() {
    if($(this).scrollTop() >= 30){
      // set to new image
      $(".brand-logo img").attr("src","http://placekitten.com/300/300");
    } else {
      //back to default
      $(".brand-logo img").attr("src","http://placekitten.com/200/200");
    }
  })
})

nav {
  position: fixed;
}

.brand-logo img {
  height: 200px;
  width: 200px;
}

.filler {
  background: pink;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
  <a href="#!" class="brand-logo">
  <img src="http://placekitten.com/200/200">
</a>

</nav>
<div class="filler"></div>

更改徽标滚动导航栏-实现？

2 个答案: