We Keep Coding

Create up-/down-slide or push effect with jQuery

I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function() {
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 115) {
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
} else {
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
if (scroll >= 300) {
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
} else {
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
});
});
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f

How to make menu and logo color change in scrolling menu?

I have fixed menu, and when scroll down, header menu change color in white. I have inserted this JQ:
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"white"});
} else {
jQuery('#navigation').css({"background":"transparent"});
}
});
into my site, that i work on it. But white color override all text and show only text when is close to it. So how to make logo in invert color, and text to be black in white background? I have found this CSS:
-webkit-filter: invert(.8);
filter: invert(.8);
But dont know how to include in JQ.

You have to change the text color of your #navigation element. You could do this like this:
jQuery('#navigation').css({"color":"black"});
EDIT:
From what i can see on your website, i came up with this:
jQuery(document).scroll(function() {
if (jQuery(this).scrollTop() > 300) {
jQuery('#navigation').css({"background":"white"});
jQuery('.menu-item').css({"color":"black"});
} else {
jQuery('#navigation').css({"background":"transparent"});
jQuery('.menu-item').css({"color":"white"});
}
});

Fade out div upon element scroll not window position

I have the heading fading out according to the scroll position, however I would like to attach the fadeout to when the user scrolls to the sticky navigation bar to create a better effect.
I tried the following but no luck!
<script>
$(".l-subheader.at_bottom").scroll(function() {
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
});
</script>
Should be pretty straight forward but I'm a JS novice!
http://scottdavy.co.uk/our-care-plans/
http://scottdavy.co.uk/our-pricing/
Thanks for your help.

Check if the header becomes position:fixed; then apply the fade effect.
<script>
$(".l-subheader.at_bottom").scroll(function() {
if( $(this).css('position') == 'fixed' )
{
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
}
});
</script>

Try the Following Demo... Smooth Scroll Header & Subheader
https://jsfiddle.net/pratikgavas/D3DDp/38/
JS Code:-
$(window).on("scroll", function(e) {
if ($(window).scrollTop() >= $("#Header").height()) {
$("#Header").fadeOut(500);
$("#SubHeader").css('top','0px');
}else {
$("#Header").fadeIn(500);
$("#SubHeader").css('top','100px');
}
});

Scrolling on webpage with mouse location - hover on side elements

So I have this layout here .
<div class="content">
<div class="direction_left"></div>
<div class="direction_right"></div>
<div class="direction_up"></div>
<div class="direction_down"></div>
</div>
<div id="game">
<div id="pos"></div>
</div>
4 divs, if I hover on top it (should) scroll top, if I hover on bottom it (should) scroll bot, left scrolls left and right scrolls right!
On mouse hover on any of the four divs inside the content will scroll the page accordingly.
Important h_amount is horizontal and v_amount is for vertical
function scroll_h() {
console.log('scrolling left and right'+h_amount);
$('#game').animate({
scrollLeft: h_amount
}, 100, 'linear',function() {
if (h_amount != '') {
scroll_h();
}
});
}
function scroll_v() {
console.log('scrolling up and down'+v_amount);
$('#game').animate({
scrollTop: v_amount
}, 100, 'linear',function() {
if (v_amount != '') {
scroll_v();
}
});
}
and then on hover I call
$('.direction_right').hover(function() {
console.log('scroll right');
h_amount = '+=50';
scroll_h();
}, function() {
h_amount = '';
});
$('.direction_up').hover(function() {
console.log('scroll up');
v_amount = '-=50';
scroll_v();
}, function() {
v_amount = '';
});
FULL fiddle here
The problem, I cannot understand why it does not work for up and down. I think my script is correct so am thinking maybe css which is a general weakness of mine might be wrong :D help!

I think I found my answer, please correct me if I am wrong!
Found this question here which asks why his scrollTop() wont animate, and the answer says that window does not have a scrollTop() property, and to use body or html instead (depends on browser, so use both).
Therefore I think my #game div does not have a scrollTop() property either! So I replaced it with html,body and its now working :D.
*
P.S. Don't really know if its actually working or "working".
*
new fiddle here
Also changed that gradient background because it made me dizzy!

Background image 50% opacity when scrolling down

I am using Backstretch jQuery plugin, and want to make the background darker when scrolling down.
This is what i made so far.
Body background-color dark
Background-image to have opacity 0.4 when scrolling down 800px.
What i have left is to make the fade effect go slow. Right now it goes from opacity 1 to 0.4 really fast.
Here is my code
$(window).scroll(function() {
if ($(window).scrollTop() > 800) {
$('.backstretch').css("opacity", 0.4).fadeIn("slow");;
}
else{
$('.backstretch').css("opacity", 1).fadeIn("slow") ;
}
});
Could anyone please help me fade it in really slow?

Try to replace your code with
$(window).scroll(function() {
if ($(window).scrollTop() > 800) {
$('.backstretch').css("opacity", 0.4).fadeIn("5000");;
}
else{
$('.backstretch').css("opacity", 1).fadeIn("5000") ;
}
});
where "5000" represents the time of the animation in milliseconds.