Question

我正在寻找的效果是我有一个正在浮动的div，里面有一个Google地图，当用户向下滚动时，我希望它固定在顶部：0px。这基本上是Yelp在搜索页面上对地图的影响。有一些问题是类似的问题，一旦用户向下滚动，使用JQuery将div的类更改为固定，但使用谷歌地图，我似乎无法使效果起作用。

主要原因是谷歌地图正在使用某种类型的javascript加载到我自己的javascript之后将位置覆盖到绝对位置，我无法通过Jquery的css方法或其他任何方式更改它。所以我添加了一个浮动的包装器，但在scrollldown上添加了一个固定的类。它固定在0px的顶部，但因为它是浮动的，一旦位置变得固定，它就跳到左边并且破坏了我的其他内容。

我在线发现了一个教程，但现在可能已经弃用了？它没有用。

Answer 1

我遇到了同样的问题。您所要做的就是在另一个内部创建一个DIV。像这样：

<div id="outDIV" style="position:fixed; top:0">
  <div id="inDIV" style="width:100%; height:100%">
    [map content goes here]
  </div>
</div>

Answer 2

我知道这已经过时了，但也许有其他人可以从这个中得到一些信息。

是的，您可以添加另一个包含地图元素的元素，但是如果您想要解决这个问题，您可以为 tilesloaded 事件设置一个侦听器，然后撤消Google完成的内容。

在api v3中，您可以这样做：

google.maps.event.addListener(myMap, 'tilesloaded', function(){
    document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});

我敢肯定，除了谷歌喜欢的地方设置位置之外还有一些问题，但是如果你想将文档中的元素数量保持在最低限度（你真的应该这样），那么是这样做的。

（编辑：添加引号）

Answer 3

你只需要挑选一下Yelp的具体内容，我认为......他们的专栏也是浮动的（检查他们的标记......它是#searchLayoutMapResults），但是然后在那里，div #searchLayoutMapResults是添加position: fixed的那个（通过className fixed），因此它不会更改浮动列的位置。所以你可能只是想在地图上添加一个额外的包装器，并将固定的位置添加到那个而不是你的浮动容器。

（我发现的标记基于this page）

谷歌地图：相对于固定定位

3 个答案: