Question

I would like to have a google map on my page in its own column, that will slide up and down to match the scroll height of the browser window. I’ve seen this functionality on a few sites (yelp comes to mind). Does anyone know a good jQuery plugin that implements this functionality? I am not even sure how to search for such a plugin because I’m not exactly sure what to call it.

Edit: Using Alley’s solution, I came up with this as the final answer:

    $(function() {
        $(window).scroll(function() {
            var $map = $('#mymap');
            var locMin = 0;
            var locMax = $map.parent().height() - $map.height()
            var dif = $(window).height() / 2 - $map.height() / 2;
            var loc = dif + $(window).scrollTop() - $map.parent().offset().top;
            if (loc > locMax)
                loc = locMax;
            if (loc < locMin)
                loc = locMin;
            $map.css('top', loc);

        })

make sure to use CSS to make the #mymap element to be position: relative.

Answer 1

Just wrote one quickly for you:

$(function() {
$(window).scroll(function() {
  if($('#map').offset().top <= 0) {
    $('#map').css({ position: 'fixed', top: 0, left: '50%', 'margin-left': YOUR PAGE WIDTH / 2 - $('#map').width() })
  } else {
    $('#map').css({ position: 'relative', top: 'auto', left: 'auto', margin:0 })    
  }
})
})