Dima Vleskov Dima Vleskov - 28 days ago 9
Javascript Question

How to animate element when you scroll down and then up

I have a problem with animation, when you start scrolling down the picture going with you until offset().top = 960px but when you scroll up this picture have to go with you to the top - and this is a problem then i don't know how to return it to the top. Here is my site, this animation on the top

//scroll cicada
var x = true;
$(window).scroll(function() {
var item = $("#cicada").offset().top;
var place = $("#circles").offset().top;
if (item >= 950 && x) {
$("#cicada").css("position", "absolute");
$("#cicada").css("top", "950px");
x = false;
} else if (item <= 950 && !x) {
$("#cicada").css("top", "160px");
x = true;
}
});


css:

.cicada {
width: 340px;
height: 380px;
background: url("../includes/images/main-item-min.png") no-repeat center center;
background-size: contain;
position: fixed;
z-index: 5;
top: 160px;
right: 59%;
z-index: 8888;
}

Answer

I guess, you should make your header visible only, when you are at top of your scroll i.e. when currentTop is 0.

var currentTop = $(window).scrollTop();
   if (currentTop == 0) {
      $("header").css("display", "block");
   } else {
      $("header").css("display", "none");
      if ($('.menu').hasClass("change")) {
        $('.menu').removeClass("change");
      }
   }

I hope, It will help.

Comments