Question

I have a div with content and overflow assigned giving it two scroll bars.

On the inside of that div is another one which needs to be anchored to the bottom at all times.

To achieve this, I put a listener on the scroll event to reposition the div at the bottom of the div:

obj.scroll(function(e) {
    var uiValue = obj.scrollTop();
    $("#calendar-grid-key").animate({ bottom: -1 * uiValue }, 0);
});

It works beautifully on nearly every browser bar Firefox 3 on PC. It has a strange lag (see video: http://www.jamiewilson.co.nz/ScreenFlow.mov).

Someone suggested stopping the event drawing, calculating the difference and then drawing but I don’t quite follow and can’t find anything online that lets me stop the draw and then restart it.

Cheers in advance!

Answer 1

How about this solution? It doesn’t move at all.

The main points:

Style:

  #calendar-grid-key {
    position: absolute;
    border: 1px solid #FF0000;
  }

And js:

function moveCalendar() {
  $("#calendar-grid-key").offset({top: $("#container").offset().top + $("#container").height() - $("#calendar-grid-key").height(), left: $("#container").offset().left });
}

$(document).ready(function() {

  moveCalendar();

  $("#container").scroll(function(e) {
    moveCalendar()
  });

});