I'm using WordPress 3.8.1. I want to use this function to use sticky header

<script>
$(document).ready(function() {
    var $header = $("header"),
        $clone = $header.before($header.clone().addClass("clone"));

    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log(fromTop);
        $("body").toggleClass("down", (fromTop > 200));
    });
});        
</script>

But it is not working for me and I don't know why. I know that jQuery is shared to my WordPress because Flexslider 2 is now working fine.

I'm using WordPress 3.8.1. I want to use this function to use sticky header

<script>
$(document).ready(function() {
    var $header = $("header"),
        $clone = $header.before($header.clone().addClass("clone"));

    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log(fromTop);
        $("body").toggleClass("down", (fromTop > 200));
    });
});        
</script>

But it is not working for me and I don't know why. I know that jQuery is shared to my WordPress because Flexslider 2 is now working fine.

• javascript
• jquery
• wordpress

• Any ouput on developer console? What do you mean by Flexslider 2 now working. – Rahil Wazir Commented Feb 22, 2014 at 0:48
• i'm a new programmer dont know about developer console , i think that if jquery library did'nt share to my wordpress flexslider dont work – Beginner Commented Feb 22, 2014 at 0:54
• does .on() work on jquery that wordpress using ( i have to use .live() instead) – inrsaurabh Commented Aug 21, 2018 at 7:02

3 Answers 3

Add this:

var j = jQuery.noConflict();

Now you can write your jQuery code like this:

j(document).ready(function(){
    j('.class').event(function(){

      // your action............

    });
  });

Just assign the noConflict() function to a variable, and use that variable instead of $ seen in jQuery code.

Late to the party here, but the correct solution to this is:

Understand that in WordPress, jQuery is loaded in no conflict mode. This means that the $ variable is not referencing jQuery.

But, by modifying your script to use a no-conflict-safe document ready, you can use the $ within the function.

Modify your script as follows:

// original code - doesn't work, because $ is not jQuery in WordPress
// $(document).ready(function() {
// shorthand no-conflict-safe document ready:
jQuery(function($) {
    // Now $ is safe to use - it references jQuery within this doc ready function
    var $header = $("header"),
        $clone = $header.before($header.clone().addClass("clone"));

    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log(fromTop);
        $("body").toggleClass("down", (fromTop > 200));
    });
});        

Have you tried setting the jquery file in your header (assuming you have the jquery file in your templates folder, but it can be anywhere, as long as you reference it correctly):

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>

Example

$(document).ready(function(){
     $("#container").alert("blah");
     $(".goodshelf_ul li:first").css("border-top: none;");
     $(".custom_ul li:first").addClass("first");
     $("#footer .frame:last").css("margin: 0;");
     $("#footer .frame:last").addClass("last");
});

I use jquery on all my wordpress sites and it works fine hope this helps.