CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
zahi daoui
zahi daoui

Reputation: 267

part of jquery code that is not working in wordpress

I have developed a jquery code that should let the menu hide a bit when I scroll down, and reappear as soon as I start scrolling up.

I had this perfectly working on my static html website, but I soon as I migrated it to wordpress, it stopped working. All my other js code works perfectly.. here is the part of code:

$(document).ready(function(){

$(window).scroll(function () {
var prevScroll;
var hidden = false;
    var currentScroll = $(this).scrollTop();
    if($("body").scrollTop() > 492){
    if (prevScroll) {
        console.log(currentScroll + "  " + prevScroll);
        console.log(hidden);
        if (currentScroll < prevScroll && hidden) {
            console.log('show');
            $("#header-wrap").animate({marginTop: '0px'}, 200);
            $("#menu").fadeIn("fast");
            hidden=false;

        } else if (currentScroll > prevScroll && !hidden) {
            console.log(hidden);
            console.log('hiding');
            $("#header-wrap").animate({marginTop: '-60px'}, 200);
             $("#menu").fadeOut("fast");
            hidden=true;
        }

    } else if(!hidden){
        console.log('first time');
        $("#header-wrap").animate({marginTop: '-60px'}, 200);
        $("#menu").fadeOut("fast");
        hidden= true;
    }
    prevScroll = currentScroll;
  }
  else{
    if(hidden){
      console.log('show');
      $("#header-wrap").animate({marginTop: '0px'}, 200);
      $("#menu").fadeIn("fast");
      hidden=false;
    }
  }
});
});

What is the problem with my code? I have it alongside all my js code in a script.js page.

Thanks

EDIT: I forgot to say that the menu is hiding , which is good, but it is not reappearing as soon as I scroll up. So part of the code is working, the other is not!

Upvotes: 0

Views: 56

Answers (2)

zahi daoui
zahi daoui

Reputation: 267

I did it, the problem was that I was declaring var prevScroll;and var hidden = false; after the beginning of the function$(window).scroll(function () {, and not before it. Thanks for the help anyway..

Upvotes: 0

Felix
Felix

Reputation: 38112

There's probably happen a conflict here between jQuery and Wordpress since both of them are using $ sign, try to use jQuery instead of $ or wrap your jQuery code inside:

jQuery(document).ready(function($){
    $(window).scroll(function () {
        // Your code here
    });
});

Upvotes: 1

Related Questions