Question

我创造了一个小提琴来提供一个可视化的例子来使用和可视化：

代码示例:(更多关于小提琴）

#mapContainer{
    display:block; 
    width:240px; 
    float:right;
    background-color:#4466EE;
    border:1px solid #345678;
    padding:10px;
    /* sticky map */    
    position: fixed;    
    top: 59px;
    left: 50%;
    margin-left: 65px;
    height:500px;
    bottom:
}
#mapContainer.fixed{
    position: fixed;
}

和我的JS：

var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
    console.log("NOT IE 6");
    //var top = $('#mapContainer').offset().top;
    var top = 0;

    $(window).scroll(function (event) {
        console.log("scrolling.......");
        var y = $(this).scrollTop();
        if (y >= top) { 
            $('#mapContainer').addClass('fixed');
            console.log("class added");
        }else { 
            $('#mapContainer').removeClass('fixed');
            console.log("class removed");
        }
    });

}

这就像我追求的95％。

'map'容器保持固定..它在哪里，而页面/内容的其余部分滚动。如果我一直向下滚动..它不会覆盖/重叠页脚（这是我想要的）

到目前为止一直这么好（至少在小提琴中..一旦我将它应用到我的项目中，不确定是否有任何惊喜..等等）

问题是..当我调整了小提琴页面中的'frames'时...（使结果窗格更宽）..我注意到地图容器/元素将自己定位在父容器的OUTSIDE中。（甚至在边界之外）......

有解决方法吗？我需要在父容器中添加一些定位吗？好像我需要两个？固定/绝对但相对于父容器？（对不起，如果我没有正确解释）..小提琴应该解释它。

固定与父级内部的绝对与相对定位

0 个答案: