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. :(

Answer 1

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> 

Answer 2

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.