Can't get jquery to work

Question

I can get this block of jquery to work on basic HTML in Codepen

However, it doesn't seem to be working when I try this on a SharePoint 2013 Publishing site.

I embedded the CSS and JQ in my master page the following way:

<!--SPM:<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/Seattle/css/customnav.css %&#62;" runat="server" after="corev15.css"/>-->
        <!--SPM:<SharePoint:ScriptLink ID="ScriptLinkJQuery" name="~sitecollection/Style Library/Seattle/js/jquery-1.7.2.js" runat="server"/>--> 
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/Seattle/js/test.js" runat="server"/>--> 

I copied the JQuery from here. I then uploaded it through Designer to /Style Library/Seattle/js

The CSS works. I use the Network feature in F12 dev tools and I can see my test script and the jquery loading.

Here's my CSS:

.ms-breadcrumb-top {

    background-color:black;
    position:fixed;
    top:65px;
    left:0;
    width:100%;
    height:30px;
    text-align: center;}

Here's my JQ:

$(window).scroll(function(){
  if($(document).scrollTop() > 0)

    {   
        $('.ms-breadcrumb-top').css({"display":"none"});
    }
  else{
         $('.ms-breadcrumb-top').css({"width":"100%"});

  }
});

What did I do wrong? How do I get this right?

Answer 1

In SharePoint the "page" is actually inside of a DIV and the window really never scrolls... The content inside that DIV does scrolls (unless you have a customized branded site). So although your code will work on a standalone HTML page, it will not in a standard Sharepoint site (2010 and above)... See the solution I posted here to a similar question.

Using your code, try this (note: I have an alerts below to ensure you are loading jQuery):

// remove this once you get it working
if (typeof jQuery === "undefined" ) { alert("jQuery does not seem to be loaded!"); }

(function($){

    $(document).ready(function(){

        var $workspaceDiv = $("#s4-workspace").scroll(function(){

            if ($workspaceDiv.scrollTop() > 0) {   

                $('.ms-breadcrumb-top').css({"display":"none"});

            } else{

                $('.ms-breadcrumb-top').css({"width":"100%"});

            }

        });

    });

})(jQuery);

Also note how I wrapped the code in an IIFE and ensured I scoped the $ variable so that you are sure to be using jQuery. You should always do this.

Answer 2

First thing I see is that $('ms-breadcrumb-top').css is missing the class identifier. It should have a '.' in the front.

$('.ms-breadcrumb-top').css