Yelp-style google map that follows the user up and down the page
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 thi开发者_运维知识库s 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
.
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 })
}
})
})
精彩评论