simple javascript if statement not working

Question

I have a simple script inside my html file that changes the opacity of a div depending on the result of the $(window).scrollTop() function. So if I scroll over a certain point the div appears and if I scroll back behind that point it should disappear again.

This works fine:

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    };
});

The logic for changing the opactiy back to 0 is missing. So I simply changed the code to:

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    };
    if ($(window).scrollTop() < $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "0"}, 500);
    };
});

All of the sudden the whole script won't work anymore! Why? I don't see any mistakes. I also tried it with else like this:

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    } else {
        $("#m-nav").animate({opacity: "0"}, 500);
    };
});

Won't work either. I am stuck. :(

I just added a console.log(); below the animate call to see if the if statement itself is even working. Of course it is. For some reason the script just won't change the css attribute... — Dawesign
– Dawesign, Commented Jan 26, 2017 at 15:31
"whole script won't work anymore" and this means what exactly? There's no visual effect? There are console errors? All your other JS stops working as well? — fdomn-m
– fdomn-m, Commented Jan 26, 2017 at 15:31
There is no visual effect! No errors, rest of the script works. Just figured that out. — Dawesign
– Dawesign, Commented Jan 26, 2017 at 15:33
Referring to the 2nd code block: What happens if $(window).scrillTop() == $("#m-product-sweater").offset().top? — elementzero23
– elementzero23, Commented Jan 26, 2017 at 15:33
It could be that the values are equal. Could you try >= and <= instead of > and < ? — Leon
– Leon, Commented Jan 26, 2017 at 15:36

Snowmonkey · Accepted Answer · 2017-01-26 16:16:31Z

It's a small thing, but your code currently re-hides the same element every time the window scrolls. You might want to consider modifying your if statement to be slightly more selective:

var toggleMe = $("#m-nav");
$(window).scroll(function() {
  var myWindowTop = $(document).scrollTop();
  var myContentTop = $(".content-pane").offset().top;
  // I'm checking the scroll position AND
  //  the visibility of my toggled div.
  //  This way, the if statement only runs
  //  once rather than constantly stacking.
  if (myWindowTop > myContentTop && toggleMe.css("opacity") == "0") {
    console.log("showMe!");
    toggleMe.animate({
      opacity: "1"
    }, 500);
  } else

  // I'm checking the scroll position AND
  //  the visibility of my toggled div.
  //  This way, the if statement only runs
  //  once rather than constantly stacking.
  if (myWindowTop < myContentTop && toggleMe.css("opacity") == "1") {
    console.log("hideMe!");
    toggleMe.animate({
      opacity: "0"
    }, 500);

  }

});

.content-pane {
  border: 1px dotted red;
}
.content-pane p {} #m-nav {
  position: fixed;
  top: 20px;
  left: 5px;
  background-color: #ccc;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus
  convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
<div class="content-pane">
  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl
    tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>

  <p>Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie
    malesuada. Nulla porttitor accumsan tincidunt.</p>

  <p>Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
    amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl
    tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>

  <p>Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie
    malesuada. Nulla porttitor accumsan tincidunt.</p>

  <p>Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
    amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>
<div id="m-nav">
  <h2>
FOO BAR FOO BAR
</h2>
</div>

I haven't tried it out yet but I think this will solve it. I noticed that the div magically appeared after a longer time. So the 500 ms are getting stacked everytime I scroll. I will post here as soon as it works.

n_plum · Accepted Answer · 2017-01-26 15:34:29Z

0

I didn't look to deep into it yet but at first glance my instinct says it should be an if and else if.

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    };
    else if ($(window).scrollTop() < $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "0"}, 500);
    };
});

You may also want to play choose something other than .offset().top for the second thing because then it may be trying to do both of them at the same spot since they're both referencing the top of the div I believe. Edit: As some are commenting, changing the > & < may also correct it.

answered Jan 26, 2017 at 15:34

n_plum

2125 silver badges16 bronze badges

2 Comments

Dawesign Over a year ago

Thank you for your answer! But that doesn't work either. It seems that the if statements are not the problem because I added console.log("CHANGED TO 1"); and console.log("CHANGED TO 0"); accordingly to the statements and they get correctly displayed in the console. The animate part seems to be the problem.

Snowmonkey Over a year ago

try changing the animate to a simple show/hide -- my suspicion is that it's stacking the animations in a queue. Perhaps, rather than simply running the animation every time, you set a show/hide data toggle, then check if that is set -- by doing this, you would only animate ONCE rather than over and over.

Collectives™ on Stack Overflow

simple javascript if statement not working

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related