Question

Im using Jquery to select an HTML object from my site.

<div id="banner">
  <!-- stuff in here -->
</div>

Im using this code:

$(window).load($(function()
{
    var elem = $("#banner");
    var top = elem.offset().top;
    var maxTop = $("#footer").offset().top - elem.height();
    var scrollHandler = function()
    {
      var scrollTop = $(window).scrollTop();
      if (scrollTop<top) {
        elem.css({position:"relative",top:""})
      } else if (scrollTop>maxTop) {
        elem.css({position:"absolute",top:(maxTop+"px")})
      } else {
        elem.css({position:"fixed",top:"0px"})
      }
    }
    $(window).scroll(scrollHandler);scrollHandler()

}));

However I keep getting the error “Uncaught TypeError: Cannot read property ‘top’ of undefined”

For some reason, its not seeing the div ‘banner’.

Any idea why?

Edit:

Per a suggestion below, I changed the code from $(window).load to $(document).ready. Still same issue.

$(document).ready($(function()
{
    var elem = $("#banner");
    var top = elem.offset().top;
    var maxTop = $("#footer").offset().top - elem.height();
    var scrollHandler = function()
    {
      var scrollTop = $(window).scrollTop();
      if (scrollTop<top) {
        elem.css({position:"relative",top:""})
      } else if (scrollTop>maxTop) {
        elem.css({position:"absolute",top:(maxTop+"px")})
      } else {
        elem.css({position:"fixed",top:"0px"})
      }
    }
    $(window).scroll(scrollHandler);scrollHandler()

}));

Answer 1

$(window).load($(function()   // Passing a jQuery Object Here

Supposed to be

$(window).load( function()   //  

If this does not work replace it with

$(document).ready( function()