更改滚动上的图像徽标
Posted
技术标签:
【中文标题】更改滚动上的图像徽标【英文标题】：Changing image logo on scroll 【发布时间】：2017-12-19 23:50:33 【问题描述】：我正在尝试在您滚动到某个点后更改图像。我已经尝试了以下方法，但是当您滚动时它会立即改变。
jQuery(function($)
$(window).scroll(function()
if($('.navbar').hasClass('navbar-brand'))
$('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
else
$('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
);
);
我尝试添加以下代码让它知道何时在图像之间切换，但失败了
var wn = $(window).scrollTop();
if(wn > 700)
【问题讨论】：
【参考方案1】：$(function ()
$(window).scroll(function ()
if ($(this).scrollTop() > 1000)
$('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
if ($(this).scrollTop() < 1000)
$('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
)
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" >
<a class="navbar-brand first" data-toggle="modal" data-target="#myModal">Start </a>
<a class="navbar navbar-brand first" data-toggle="modal" data-target="#myModal"><img src='http://placehold.it/120?text=Original+Logo!'></a>
<a class="dropdown-toggle btn btn-primary btn-md btn-example dropdown-hover-toggle" data-toggle="dropdown"
>
</a>
<ul class="dropdown-content dropdown-menu dropdown-menu-right" role="menu" >
<li> <a href="#" title="I'm Serious"> Nothing to see here</a> </li>
</ul>
</nav>
<div class="bbb aaa">
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="width:1500px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color: #003399;">
<button type="button" class="close" data-dismiss="modal" style="color:
#fff;">×</button>
<h4 class="modal-title" style="color: #fff;">Upload New File</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="uploadfile.php" method="post"
name="addservice" enctype="multipart/form-data" align="center"
onsubmit="return validateForm()">
<label for="filename" class="col-sm-2 control-label">File Name:
</label>
<div class="col-sm-4"><input type="text" class="form-control"
name="filename" id="filename" placeholder="Name of the file"
maxlength="55" tabindex="1" required></div>
<label for="file" class="col-sm-2">File:</label>
<div class="col-sm-4"><input type="file" maxlength="11"
name="file" id="file" class="form-control" tabindex="2"
required></div>
<label for="filedesc" class="col-sm-2">File Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3"
name=" filedesc" id="filedesc" placeholder="(maximum of 75
characters)" style="resize: none;" maxlength="75" tabindex="3"
required></textarea></div>
<div class="col-sm-4">
<div class="form-group"><input class="btn btn-success btn-lg col-
sm-4" name="submit" type="submit" value="Upload" tabindex="4">
<input type="reset" class="btn btn-default btn-lg col-sm-4"
name="clear" value="Clear" tabindex="5">
</div>
</div>
</form>
<div>
</div>
</div> <!-- modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div> <!-- modal content -->
</div> <!-- modal dialog -->
</div>
<h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>
<h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>这应该可以解决问题。如果您需要将其更改回来，请执行相同的功能但切换逻辑...
编辑
所以这是第一个条件：
if ($(this).scrollTop() > 1000)
$('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
现在我添加了第二个条件：
if ($(this).scrollTop() < 1000)
$('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
我改变了两件事：
-
链接中的数字
> 变成了<
所以现在的逻辑是：如果滚动小于 1000px 使用小图像，如果超过 1000px 使用大图像。
【讨论】：
@Emanuel codepen.io/hansfranz/pen/gRQKEy?editors=1010 看看这个代码笔。 1000px 后它会向您发送警报。您需要实现逻辑而不是警报。你的标题是什么样子的 codepen 可以在 1000 像素后更改图像，但如果用户向上滚动到 1000 像素以上，我希望它恢复为正常徽标。 非常感谢您！我刚刚玩过它，它也适用于 else 语句。 我在使用这个技术，我认为一切都很好，但是当我来跨浏览器测试时，我发现如果在chrome上来回闪烁。我什至尝试使上限和下限不同，但它仍然可以。有什么想法吗？【参考方案2】： html
----------------------------------------
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light cn-stick-nav">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="images/logo/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="cn-toggle"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown2">
<ul class="navbar-nav mr-auto">
<!--extra menu space-->
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">New Arrived</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
---------------------------------
JAVA Script
---------------------------------
$(window).scroll(function()
if($(this).scrollTop()>5)
$(".cn-stick-nav").addClass("fixed-top navbar-dark bg-dark nav-bdr");
else
$(".cn-stick-nav").removeClass("fixed-top navbar-dark bg-dark nav-bdr");
)
//
$(function()
$(window).scroll(function()
if($(this).scrollTop()>5)
$(".navbar .navbar-brand img").attr("src","images/logo/logo-white.png");
else
$(".navbar .navbar-brand img").attr("src","images/logo/logo.png");
)
)
【讨论】：
【参考方案3】：Total 解释与教程 https://www.youtube.com/watch?v=52RLKmctp7U [如何制作粘性导航栏并在滚动条上更改徽标 |吉安尼提]
【讨论】：
代码在这里---- ----------------------------- $(window).scroll (function() if($(this).scrollTop()>5) $(".cn-stick-nav").addClass("fixed-top navbar-dark bg-dark nav-bdr"); else $(".cn-stick-nav").removeClass("fixed-top navbar-dark bg-dark nav-bdr"); ) // $(function() $(window).scroll( function() if($(this).scrollTop()>5) $(".navbar .navbar-brand img").attr("src","images/logo/logo-white.png"); else $(".navbar .navbar-brand img").attr("src","images/logo/logo.png"); ) ) 请将相关代码编辑为您的答案，而不是评论。以上是关于更改滚动上的图像徽标的主要内容，如果未能解决你的问题，请参考以下文章