CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gavin Friel
Gavin Friel

Reputation: 191

Hide Div on Scroll with JQuery

I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript.

This code works

$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop() - 100 ;
    if (scrollPos < 100) {
        $("#menu").fadeOut();
    } else {
        $("#menu").fadeIn();
    }
});

This doesn't 

$(window).on("scroll", function() {
    var menu = document.getElementById("menu");
    var scrollPos = $(window).scrollTop() - 100 ;
    if (scrollPos < 100) {
        menu.fadeOut();
    } else {
        menu.fadeIn();
    }
});

In the latter piece, all I'm trying to do is assign a variable.

Here's the fiddle: https://jsfiddle.net/gavinfriel/nhovvj6q/1/

Your help would be appreciated.

Upvotes: 0

Views: 73

Answers (4)

David Wilkinson
David Wilkinson

Reputation: 5118

As others have mentioned, you've declared a JavaScript variable but are trying to use it as a jQuery object.

I would personally go with PierreDuc's answer but if you refactor your code slightly you can carry on using the vanilla JS declared vaiable, but pass the variable slightly differently:

var test = document.getElementById("test");
$(test).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
  TEST
</div>

In your 2nd code, this might look as follows:

$(window).on("scroll", function() {
    var menu = document.getElementById("menu");
    var scrollPos = $(window).scrollTop() - 100 ;
    if (scrollPos < 100) {
        $(menu).fadeOut();
    } else {
        $(menu).fadeIn();
    }
});

Upvotes: 0

Dhaval Soni
Dhaval Soni

Reputation: 305

Checkout this it will work.

 $(window).on("scroll", function() {
    var menu = $("#menu");
        var scrollPos = $(window).scrollTop() - 100 ;
        if (scrollPos < 100) {
            menu.fadeOut();
        } else {
            menu.fadeIn();
        }
    });

Upvotes: 0

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

You need to use jquery to convert menu to jQuery object. So it will have the fade property

$(window).on("scroll", function() {
    var menu = document.getElementById("menu");
    var scrollPos = $(window).scrollTop() - 100 ;
    if (scrollPos < 100) {
        $(menu).fadeOut();
    } else {
        $(menu).fadeIn();
    }
});

Because if you use menu.fadeOut() it will generate error because menudoesn't have fade property

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71911

You have to wrap it in a jQuery call to make it a jQuery object. Otherwise it cannot find the fadeOut and fadeIn functions:

var menu = $("#menu");

or

var menu = $(document.getElementById("menu"));

Upvotes: 3

Related Questions