CODEWITHSUNDEEP
jqueryhtmlnavigationfixed
Paul Designer
Paul Designer

Reputation: 865

Jquery Bug on fixed nav?

I am having difficulty resolving a jquery issue,

my code works in a fiddle but when i add it into my document is wont work.

please see link

Any help would be great !!!!

http://paulobriendesign.co.uk/chartego/test.html (not working) http://jsfiddle.net/7Gacp/ (working)

my html 

<html>
<head>
    <title>Page Title</title>

</head>

<style>
#profile-container {
    padding-top:52px;
    /* Red bar height */
    margin:0;
    /* Clear default browser margin */
}
#profile-container.fixed {
    padding-top:82px;
    /* Red bar height + yellow bar height */
}
#profile-container {
    height:2000px;
}
#fixed-header {
    width:100%;
    position:fixed;
    height:50px;
    border:1px solid black;
    top:0px;
    background-color:red;
}
.container {
    height:300px;
    width:100%;
    background-color:blue;
}
.sticky-header {
    width:700px;
    height:50px;
    background:orange;
}
.sticky-header {
    height:30px;
    width:100%;
    background:yellow;
}
.fixed .sticky-header {
    position: fixed;
    top:52px;
    margin-bottom:52px;
}
.img {
    width:200px;
    height:200px;
    border:1px solid grey;
    float:left;
}
</style>


<script>
var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($(window).scrollTop() > offset.top - additionalPixels) {
        $('#profile-container').addClass('fixed');
    } else {
        $('#profile-container').removeClass('fixed');
    }
});
</script>


<body>

<div id="profile-container">
    <div id="fixed-header"></div>
    <div class="container"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    <div class="img">needs to be smooth</div>
    <div class="img"></div>
    <div class="img"></div>
</div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</body>
</html>

Upvotes: 0

Views: 140

Answers (1)

PSL
PSL

Reputation: 123739

Your script tag appears above jquery script. So it just doesn't know what is $ yet. Put your script below jquery and see it work (Place your script wrapped in document.ready or after the elements in the html, so that the elements are available for selection.). In jsFiddle when you select load in the drop down it wraps your script in window.onload, adding the script tag for jquery on the head and that is why it works.

<script>
var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($(window).scrollTop() > offset.top - additionalPixels) {
        $('#profile-container').addClass('fixed');
    } else {
        $('#profile-container').removeClass('fixed');
    }
});
</script>


<body>

<div id="profile-container">
    <div id="fixed-header"></div>
    <div class="container"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    <div class="img">needs to be smooth</div>
    <div class="img"></div>
    <div class="img"></div>
</div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Try 

    <body>

    <div id="profile-container">
        <div id="fixed-header"></div>
        <div class="container"></div>
        <div class="sticky-header">This needs to be fixed when hits top of screen</div>
        <div class="img">needs to be smooth</div>
        <div class="img"></div>
        <div class="img"></div>
    </div>


    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script>
 $(function(){ //<--- Here document.ready
    var offset = $(".sticky-header").offset();
    var sticky = document.getElementById("sticky-header")
    var additionalPixels = 50;

    $(window).scroll(function () {
        if ($(window).scrollTop() > offset.top - additionalPixels) {
            $('#profile-container').addClass('fixed');
        } else {
            $('#profile-container').removeClass('fixed');
        }
    });
  });
 </script>

Upvotes: 2

Related Questions