What's wrong with my jquery code? (tutorial code doesnt work) [duplicate]

Question

Edit:I found the problem: the tutorial used an addon ->

<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

So yeah now it works ^-^, thanks for the help though :)

so its is a question that referes to this question: Change div css when user scrolls past it, using jQuery

I copied the jsfiddle code but it doesnt work :(

here is my page:

<html>
<head>
<title>Demo</title>
<style type="text/css">
body {
    color:#000;
    text-align:center;
    font:700 60px/1'segoe ui', sans-serif;
}
div {
    width:100%;
}
b {
    opacity:.2;
}
.head {
    height:250px;
    line-height:250px;
    background:#34495e;
}
.menu {
    height:100px;
    line-height:100px;
    background:#1abc9c;
}
.main {
    height:600px;
    line-height:600px;
    background:#ffffff;
}
.foot {
    height:800px;
    line-height:800px;
    background:#34495e;
}
/* account for "Menu" being removed from doc flow... */
 .dock .main, .stop .main {
    padding-top:100px;
}
/* when "Head" is out of view... */
 .dock .menu {
    z-index:40;
    position:fixed;
}
/* when "Main" is out of view... */
 .stop .menu {
    z-index:40;
    position:absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var elWrap = $(".wrap");
var elMenu = $(".menu");
var osMenu = elMenu.offset().top;
var osFoot = $(".foot").offset().top - elMenu.height();

$(window).scroll($.throttle(10, function () {

    elMenu.css("top", 0);
    var edge = $(window).scrollTop();

    if (osMenu <= edge && osFoot > edge) {
        elWrap.addClass("dock").removeClass("stop");
    } else {
        elWrap.removeClass("dock stop");
    }
    if (osFoot <= edge) {
        elMenu.css("top", osFoot);
        elWrap.removeClass("dock").addClass("stop");
    }

}));
</script>
</head>
<body style="margin:0;">
<div class="wrap">
    <div class="head"><b>Head</b>
    </div>
    <div class="menu"><b>Menu</b>
    </div>
    <div class="main"><b>Main</b>
    </div>
    <div class="foot"><b>Foot</b>
    </div>
</div>
</body>
</html>

@john Smith -> the menu isnt getting fixed / the jquery doesnt seem to work atall — SpaceIsCoolMan
– SpaceIsCoolMan, Commented May 5, 2014 at 14:32

j08691 · Accepted Answer · 2014-05-05 14:02:23Z

1

You need to put your code in a document ready call. jsFiddle does it for you. Or, you could put it at the end of the page. As it stands in your example, you're attempting to execute code on elements that don't yet exist.

$(document).ready(function () {
    var elWrap = $(".wrap");
    var elMenu = $(".menu");
    var osMenu = elMenu.offset().top;
    var osFoot = $(".foot").offset().top - elMenu.height();
    $(window).scroll($.throttle(10, function () {
        elMenu.css("top", 0);
        var edge = $(window).scrollTop();
        if (osMenu <= edge && osFoot > edge) {
            elWrap.addClass("dock").removeClass("stop");
        } else {
            elWrap.removeClass("dock stop");
        }
        if (osFoot <= edge) {
            elMenu.css("top", osFoot);
            elWrap.removeClass("dock").addClass("stop");
        }
    }));
});

answered May 5, 2014 at 14:02

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SpaceIsCoolMan Over a year ago

still not working, it just isnt changing the class -> it looks like jquery isnt working at all :/

j08691 Over a year ago

Check the browser's console for errors. If it works on jsFiddle it should work elsewhere.

SpaceIsCoolMan Over a year ago

sorry i dont know how to do that... can you copy and past my code and see if it works for u (with your hot fix) ?

Amit Joki · Accepted Answer · 2014-05-05 14:02:31Z

0

Wrap your code within DOM ready.

$(document).ready(function(){
   // code goes here.
});

Or, use the short notation:

$(function(){
   // code goes here
});

The problem is you are trying to access the elements even before they existed. While, jsfiddle does this automatically for you.

answered May 5, 2014 at 14:02

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Collectives™ on Stack Overflow

What's wrong with my jquery code? (tutorial code doesnt work) [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related