Dfyjkt

I am pretty much a newbie in coding, and i am currently working on a company as part of my studies.
They gave me an html and css file to edit, i had to make an image appear and disappear depending on the distance scrolled. I managed to make the class disappear after getting to a concrete distance from the top, but it makes a weird jump. The code isn't mine, i just edited some things so if any information is missing please tell me so i can add it.

The HTML goes like this:

jQuery("document").ready(function($){ 

var nav = $('#feedback_form'); 

$(window).scroll(function () 
 if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1289 ) 
 nav.addClass("f-nav");
 else 
 nav.removeClass("f-nav");
 

); 

And the "f-nav" class it's referring to in the css is this one:

.f-nav 
z-index: 9998!important;
position: fixed!important;
top: 0; 

-webkit-animation: fadeIn ease-in 1; /* Safari and Chrome */
-moz-animation: fadeIn ease-in 1; /* Firefox */
-ms-animation: fadeIn ease-in 1; /* Internet Explorer */
-o-animation: fadeIn ease-in 1; /* Opera */
animation: fadeIn ease-in 1;

-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;

The addClass also makes a jump but it's less noticeable.
Like i said im pretty new to this so i don't know where the problem could be coming from.

Here's a gyazo to the problem:

https://gyazo.com/9b3e0a910c095fa3b180b9501eed9981

Try this, it'll work

if ($(window).scrollTop() > 445 || $("html").scrollTop() > 289) 
 $("#feedback_form").fadeIn();
 else 
 $("#feedback_form").fadeOut();
;

Are you sure that in your code, $(this) is declared?
Accept if my code work, or let me know if there is anything. I can help you.

Sorry to write code here I have to make another answer:
About the $(this), you have to know what is $(this). For example:

$(".ex").click(function()
 $(this).addClass("example");
)

$(this) above mean $(".ex).

And the images don't follow throught the scroll I think it's because of z-index (maybe).

So try this:

if ($(window).scrollTop() > 445 || $("html").scrollTop() < 1289) 
 $("#feedback_form").fadeIn().addClass("myClass");
 else 
 $("#feedback_form").fadeOut();
;

with

.myClass
 position: fixed; /*add !important if you need*/
 z-index: 9999; /*add !important if you need*/
 width: 100%;