Absolute div跳過或在Google地圖上消失

我想要一個div懸停在使用Google Maps API製作的地圖上。Absolute div跳過或在Google地圖上消失

但是，當浮動div到達地圖的縮放圖標時，它開始抖動，扭曲或有時不起作用。

任何想法，爲什麼發生這種情況，我應該如何解決它？

我試過設置z-index高。但問題仍然存在。

這裏是一個的的jsfiddle：http://jsfiddle.net/3ew56tkv/2/

CSS

html, body 
{ 
    width:100%; 
    height:100%; 
} 
.mainWrap 
{ 
    width:100%; 
    height:100%; 
} 
.map 
{ 
    width:100%; 
    height:100%; 
} 
.navigation 
{ 
    width:inherit; 
    position:absolute; 
    z-index:99999; 
    background-color:white; 
}

HTML

<div class="mainWrap"> 
     <div class="mainIntro"> 
     <p class="year" id="yearTitle"></p> 

     </div> 
     <div class="navigation"> 
       <div> menu option </div> 
       <div> menu option </div> 
       <div> menu option </div> 

      </div> 
     <div id="mainMap" class="map"> 
     </div> 
     <div style="margin-top:100%;">x</div> 
    </div>

的Javascript

  var mapZoom = 10; 
      var mapCenterLat = 41.82454868; 
      var mapCenterLon = -87.6341629; 
      var map; 




     google.maps.event.addDomListener(window, 'load', initialize); 


     function initialize() { 

      var map_canvas = document.getElementById('mainMap');  
      var map_options = { 
       center: new google.maps.LatLng(mapCenterLat,mapCenterLon), 
       zoom: mapZoom, 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      }; 

      //Draw the map 
      map = new google.maps.Map(map_canvas, map_options); 

      //Activate overlay 
      var OverlayMap = new MyOverlay({map: map}); 

     } //End initialize() 
$(window).scroll(function() { 

        var scrollBar = $(this).scrollTop(); 
        var windowHeight = $(window).height(); 
        var bottomScroll = windowHeight-scrollBar; 
        var scrollPosition = $(window).scrollLeft() 
      var navigationPosition = $('.navigation').offset(); 

     var navigationWidth = $('.navigation').width(); 

    if (scrollBar > navigationPosition.top) { 
        $('.navigation').css({ 
         position: 'fixed', 
         top: '0px', 
        }); //end css changes 
        $('.navigation').css("width",navigationWidth); 

       } else { 
        $('.navigation').css("position","absolute"); 
        }; //end else 
});//end scroll function

來源

2014-09-26 auto

您可以將'.navigation'的位置設置爲'fixed' [fiddle]（http://jsfiddle.net/3ew56tkv/3/） – karan3112 2014-09-26 09:11:32

謝謝。我設置位置：固定我的CSS和JavaScript函數，它現在工作正常！你能解釋爲什麼修復絕對的作品嗎？ – auto 2014-09-26 09:20:59

我認爲閃爍是因爲您正在計算窗口滾動上的.navigation div的位置。因此，刪除該代碼，只需將position:fixed指定給css中的.navigation div即可。這將迫使div被固定到窗口。

請注意固定div將相對於窗口而不是其相對的父親。

在演示中，我剛剛給了位置css的!important以覆蓋動態值。

DEMO

希望這有助於。

來源

2014-09-26 09:27:48 karan3112

工作。謝謝！！ – auto 2014-09-26 21:18:30

Absolute div跳過或在Google地圖上消失

回答

相關問題