Jesse Lawson

Software engineering, artificial intelligence, writing, and open-source tools

Jan 1, 0001 - Code Snippets

JQuery scrollTop not working with Zurb Foundation

Recently I discovered something about the way Foundation calls JQuery. I was trying to get a function to reveal a div on window scroll and discovered that you only have to change the syntax for the function call to get it to work.

Error: undefined function

How can document be an undefined function? Oh, because we’re calling our code wrong. Here is what I was trying to do:

<script>
    (function($) {
        $(document).foundation();
    })(jQuery);
</script>

<script type="text/javascript">

    $(document).scroll(function (evt) {
    var y = $(this).scrollTop();
    if (y > 100) {
        $('#title-plaintext').fadeIn(500);
    } else {
        $('#title-plaintext').fadeOut(500);
    }

    });

</script>

… and here’s how I fixed it:

<script>
    (function($) {
        $(document).foundation();
    })(jQuery);
</script>

<script type="text/javascript">
(function($) {
    $(document).scroll(function (evt) {
    var y = $(this).scrollTop();
    if (y > 100) {
        $('#title-plaintext').fadeIn(500);
    } else {
        $('#title-plaintext').fadeOut(500);
    }

    });
})(jQuery);

</script>

I hope this helps!