绝对div在Google上移动或消失

Question

我想要一个div悬停在用Google制作的地图上。

然而，当浮动的div到达地图的缩放图标时，它就会开始抖动、扭曲或有时出现散斑现象。

你知道为什么会发生这种事吗?我该怎么解决呢？

我试过把z指数调高。但问题仍然存在。

下面是一个小摆设：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;
}

<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

Answer 1

我认为闪烁是因为您正在计算.navigation div在窗口滚动中的位置。因此，删除该代码，只需将position:fixed交给css中的.navigation div。这将迫使div被固定到窗口。

请注意，固定的div将相对于窗口，而不是相对于其相对父级。

在演示中，我刚刚给了!important位置css以覆盖动态值。

演示

希望这能有所帮助。