javascript - 带有位置的传单：滚动后固定留下灰色痕迹

Question

我正在尝试制作包含两个 div 的网站：

• 左，Y-滚动内容
• 对，不动（位置固定），仅包含标签和传单图

当我滚动页面时，传单会留下灰色的痕迹，我想摆脱它。

我在这里（在stackoverflow）找到的只是map.invalidateSize()，但它对我没有帮助。

在此处观看完整的 jsfiddle 示例。

HTML：

<div id="map">      
</div>

<div id="content">
Heres the text<br />
    ...
</div>

CSS：

html, body, #map {
    width: 100%;
    height: 100%;
}
#map{
    width: 400px; 
    height: 400px; 

    position: fixed; 
    left: 60%; 
    top: 30%;   
}

JS：

    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('map').setView([51.505, -0.09], 13);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    window.map = map;

$(document).ready(function(){
    $(window).scroll(function(){
        window.map.invalidateSize();
    })
})

Answer 1

将其更改为background: none;

#map{
    width: 400px; 
    height: 400px; 
    background: none;
    position: fixed; 
    left: 60%; 
    top: 30%;   
}