I'm currently using sticky.js to fix a div to the top of my screen when I scroll. This works perfectly and I wouldn't want to change it but I would like to apply some css to the div to effect some change when it sticks.
I have tried implementing some JavaScript to the sticky script but it's still not working.
This is what I have now:
HTML
<div class="header"><div class="small_logo"><a href="/"><img src=""></a></div></div>
JavaScript
$(document).ready(function(){
$(".header").sticky({
topSpacing: 0,
success: function() {
$('.header').addClass("wide");
$('.small_logo').fadeIn("slow");
}
});
});
I'm sure it's just a simple javascript format issue but I just can't seem to find the right syntax.
Further to @Alex's point, the documentation does not describe any success option that you have used in your code.
The correct way would be to use the events that have been described in the documentation on github
I've given an example below.
$(document).ready(function(){
$(".header").sticky({topSpacing: 0});
$('.header').on('sticky-start', function() {
$(".small_logo img").fadeIn("slow");
});
$('.header').on('sticky-end', function() {
$(".small_logo img").fadeOut("slow");
});
});
.header {
background: #EEE;
height: 100px;
}
.small_logo img{
height: 100px;
display: none;
}
.body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
<div class="header">
<div class="small_logo">
<!-- <a href="/"> -->
<img src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
<!-- </a> -->
</div>
</div>
<div class="body"></div>