Question

我想在我自己的专栏中有一个谷歌地图，它会上下滑动以匹配浏览器窗口的滚动高度。我在一些网站上看到了这个功能（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。

Answer 1

刚为你写了一篇：

$(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 })    
  }
})
})

Yelp风格的谷歌地图跟随用户在页面上下

1 个答案: