yelp风格的谷歌地图，跟随用户上下页面

Yelp-style google map that follows the user up and down the page

本文关键字：用户 上下 跟随 风格 谷歌地图 yelp      更新时间：2023-09-26

我想有一个谷歌地图在我的页面在自己的列，这将滑动上下匹配浏览器窗口的滚动高度。我在一些网站上看到过这个功能(我想到了yelp)。有谁知道一个很好的jQuery插件实现这个功能吗?我甚至不确定如何搜索这样的插件，因为我不确定该怎么称呼它。

编辑:使用Alley的解决方案，我想出了这个作为最终答案: 
    $(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);
        })

确保使用CSS使#mymap元素成为position: relative

给你写了一个:

$(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 })    
  }
})
})
相关文章：