Yelp風格的谷歌地圖，沿用戶上下頁面

我想在自己的專欄中在我的頁面上有一個谷歌地圖，它會上下滑動以匹配瀏覽器窗口的滾動高度。我在幾個網站上看到了這個功能（想起yelp）。有誰知道一個很好的jQuery插件來實現這個功能嗎？我甚至不知道如何搜索這樣一個插件，因爲我不確定該怎麼稱呼它。Yelp風格的谷歌地圖，沿用戶上下頁面

編輯：使用衚衕的解決方案，我想出了這個作爲最終的答案：

$(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。

來源

2011-08-19 Robert Martin

剛剛撰寫了一個迅速給您：

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

來源

2011-08-19 01:13:12 sdfadfaasd

這並沒有爲我完全工作。你能描述伴隨的DOM結構嗎？ –

嗯，我只是假設有一個div與'地圖'的ID。只需使用屬性修改第一個css（），將其設置爲滾動時屏幕上想要的位置，然後再將CSS重置爲原始位置。 – sdfadfaasd

Yelp風格的谷歌地圖，沿用戶上下頁面

回答

相關問題