Change the logo of a scrolling image
I am trying to resize an image after scrolling to a certain point. I tried the following but it changes when scrolling.
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!');
}
});
});
I tried to add the following code to find out when to switch between images, but failed
var wn = $(window).scrollTop();
if(wn > 700){
+3
source to share
1 answer
$(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>
This should do the trick. If you need to change it, do the same function, except for the switch logic ...
EDIT
So that was the first condition:
if ($(this).scrollTop() > 1000) {
$('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
}
And now I added a second condition:
if ($(this).scrollTop() < 1000) {
$('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
}
I changed two things:
- reference number
-
>
became<
So now the logic: if the scroll is less than 1000 pixels, use a small image, and if more than 1000 pixels, use a large image.
+4
source to share