Javascript Optimization

Question

I can't seem to figure out how to get this JS to work. The scroll function works but not the hide. Also is there anyway to do this with less lines of code? I want .down-arrow to fade out after 50px and hide after the 50px that way it can't be clicked on. It was working on my site and codepen, but then it randomly stopped working. The code is clearly wrong, but somehow it was working...

JS:

$(window).scroll(function() {
  $(".down-arrow").css("opacity", 1 -
    $(window).scrollTop() / 50 );
});

$(window).scroll(function() {
  $(".down-arrow").hide(fast);
   $(window).scrollTop() > 50 );
});

[Edit]

Here is the new JS I wrote with advice on the obvious syntax error and suggestions to place it all in one body, which I was hoping to do anyways:

$(window).scroll(function() {
  $(".down-arrow").hide("fast");
    $(".down-arrow").css("opacity", 1 -
      $(window).scrollTop() / 50 );
});

But now I want the arrow to show when the use goes back up to the top, above the 50px mark.

"Also is there anyway to do this with less lines of code?" - There is no need to define two separate scroll handlers, just put the bodies of both of those functions into a single function inside a single call to $(window).scroll(). — nnnnnn
– nnnnnn, Commented Jul 26, 2016 at 2:31
I was hoping to do that but couldn't get anything to work so I had to figure out how to do it in two seperate bodies. Thanks, I will do that! — ERIC
– ERIC, Commented Jul 26, 2016 at 2:34

Marko Mackic · Accepted Answer · 2016-07-26 02:53:41Z

5

First of's first, there is no need to register a funcition twice

var element = $(".down-arrow");
$(window).scroll(function() {
  if( $(window).scrollTop() > 50){
   element.css("opacity","0");
   if(!element.hasClass("hidden")){
     element.addClass("hidden");
   }
   }else{
   $('.down-arrow').removeClass("hidden") // if there is nothing, nothing to remove
   $(".down-arrow").css("opacity", 1 -$(window).scrollTop() / 50 );
   }
});

Some CSS change :

.down-arrow.hidden{
  display:none;
}
.down-arrow:hover {
  //you have to overwrite inline opacity , which js makes..
  opacity: 1 !important;
}

Now it should work as expected, try :)

edited Jul 26, 2016 at 2:53

answered Jul 26, 2016 at 2:33

Marko Mackic

2,3431 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ERIC Over a year ago

I am doing this on a link so just changing the opacity does not work, it has to be hidden. Otherwise it is still clickable.

ERIC Over a year ago

Here you cans see it in action. It seems like the opacity is lowered even when you are at the top of the page? [link] (codepen.io/ericshio/pen/zBRbAY)

Marko Mackic Over a year ago

Yep, I'm currently trying to fix that. :)

ERIC Over a year ago

Cheers! :) Thank you so much for your help! I have been trying to figure this out for weeks! :P

ERIC Over a year ago

I changed the opacity 1 - to 0.6 - because that is what the css is set for when the img is not being hovered over.

|

Collectives™ on Stack Overflow

Javascript Optimization

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related