个人中心
gpt4 book ai didi

javascript - 滚动页面时如何添加新 Logo

转载 作者：太空宇宙 更新时间：2023-11-04 01:21:29 25 4
gpt4 key购买 nike

向下滚动页面时，我有一个脚本可以更改导航栏中的颜色。但是，我也需要在向下滚动时更改“ Logo ”类中的图像。

这是 Jquery 脚本:

<script type="text/javascript">
    $(window).on('scroll', function(){
        if($(window).scrollTop()){
            $('nav').addClass('color');
            //$('logo').attr('src', '/img/logo-dark.png');
        }else{
            $('nav').removeClass('color');
        }
    })
</script>

这是导航栏上带有 Logo 的下一行:

<body>
<nav>
    <div id="logo" class="logo">
        <a href="#"><img src="img/logo-branco.png"></a>
    </div>

我需要更改为位于同一文件夹 img/logo-dark.png 中的图像“logo-dark.png”

这是 style.less:

nav.color{
background: rgb(255,255,255);
}

最佳答案

试试这个:

    $(window).on('scroll', function(){
        if($(window).scrollTop()){
        	$('.default-logo').hide();
          $('.dark-logo').show();
        }else{	
          $('.dark-logo').hide();
        	$('.default-logo').show();
        }
    })
.default-logo{
  display: none;
}



/* extra */
body{
  height: 3000px;
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo" class="logo">
        <a href="#">
          <img class="default-logo" src="http://via.placeholder.com/100x100/ff0000/ffffff">
          <img class="dark-logo" src="http://via.placeholder.com/100x100/999999/ffffff">
        </a>
    </div>

jsfiddle 链接:https://jsfiddle.net/br18ohc9/10/

关于javascript - 滚动页面时如何添加新 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48976600/

25 4 0
文章推荐： css - CSS 变量是官方 W3C 规范的一部分吗？
文章推荐： python - 使用python将字符串从arduino存储到文本文件
文章推荐： python - 通过雅可比行列式进行 lmfit 最小二乘
文章推荐： css - 将 ul 对齐到固定 div 中的底部
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com