Question

我希望将div悬停在使用Google Maps API制作的地图上。

然而，当浮动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

Answer 1

我认为闪烁是因为你正在计算窗口滚动上.navigation div的位置。因此，请删除该代码，然后将position:fixed提供给css中的.navigation div。这将迫使div固定在窗口上。

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

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

DEMO

希望这有帮助。

绝对div在谷歌地图上摇晃或消失

1 个答案: