Question

I have a two column site layout that has the content of the left column as absolute and the div in the right column as fixed. I am trying to get it so that as I scroll down the page and the fixed div box scrolls past anchor points (on the left), the content of the fixed div will change (images will be appended).

The very loose weave jquery I have so far is this:

(function ($) {
  $(document).ready(function () {  
    var anchor = $("")
    var code = 
    $(window).scroll(function (event) {
      var y = $(this).scrollTop();
      if (y >= anchor) {
        $('#theDiv').append('<img id="livecodeimg" src="' + code +'.png" />')
      } else {
        $("#test img:last-child").remove()
      }
    });
  });
})(jQuery);

I’m having trouble figuring out what to make the variables…

Answer 1

You need to iterate over each a tag and check whether you have passed it in the scroll.

(function ($) {
    $(document).ready(function () {
        var anchor = $("")
        var code = 
        $(window).scroll(function (event) {
            var y = $(this).scrollTop();
            $('a').each(function() {
                if (y >= $(this).offset.top) {
                    $('#theDiv').append('<img id="livecodeimg" src="' + code +'.png" />')
                } else {
                    $("#test img:last-child").remove()
                }
            });
        });
    });
})

Hope this helps.