Javascript 右侧为静态DIV，左侧为流体（宽度）DIV，使用'占据剩余空间；粘性'；DIV故障

我希望我能正确解释这一点，因为它涉及两个方面的影响

我（差不多）两样都能做到。。但不是两者都在一起

摘要： 我有一个成员目录，在那里我列出了一系列基于（接近度）搜索的“条目”（结果）

我在容器DIV中列出/显示了这些条目（DIV） 我在右边有一个谷歌地图，它绘制了与左边条目匹配的标记

目标：

第一部分： 我希望静态宽度贴图容器定位正确。。。 我希望搜索结果（容器）位于左侧。。但是我想让宽度占据剩下的空间，直到地图容器DIV

我已经做到了。。。 小提琴示例：

第二部分： 在我尝试添加上述行为之前。。。我让地图容器成为“粘性”地图。。这意味着它位于页面加载/默认位置。。但当你滚动到某个位置时。。。当用户滚动浏览所有搜索结果时，地图将使它们变得“粘滞”，并与用户一起滚动（向下）

这是相当不错的工作。。。（除非只有2-3个结果……并使地图“跳跃”）

然而。。在实现结果容器后，将其宽度设置为100%，以占用映射容器的空间

一旦贴图变为“粘性”，左侧（结果）容器将位于贴图容器上方。。而且是全宽的

我用于“粘性”贴图行为的JS代码：

//sticky map placement
$(function(){
    var stickyMapTop = $('#mapContainer').offset().top;  
    var stickyMapBottom = ($('#directory').offset().top + $('#directory').outerHeight())  - ($('#mapContainer').outerHeight(true));
    var directoryBottom = stickyMapBottom - stickyMapTop + (parseInt($('#mapContainer').css("marginTop").replace('px', '')));

    $(window).scroll(function(){
        var viewportWidth = $(window).width();
        if(viewportWidth > 768){
            if($(window).scrollTop() > stickyMapTop && $(window).scrollTop() < stickyMapBottom) {
                $('#mapContainer').css({position: 'fixed', top: '0px', left: $('#mapContainer').offset().left});
            }else{
                if($(window).scrollTop() >= stickyMapBottom) {
                    //secondary position check to see what new positioning style to apply?  
                    $('#mapContainer').css({position: 'relative', top: directoryBottom, left:'0px'});
                }else if($(window).scrollTop() < stickyMapTop){ 
                    //needed?
                    $('#mapContainer').css({position: 'static', top: '0px'});
                }
            }
        }else{
            $('#mapContainer').css({position: 'static', top: '0px'});
        }
    });
});

//粘性贴图放置
$（函数（）{
var stickyMapTop=$（'#mapContainer'）.offset（）.top；
var stickyMapBottom=（$（'#目录'）.offset（）.top+$（'#目录'）.outerHeight（））-（$（'#映射容器'）.outerHeight（true））；
var directorybooth=stickyMapBottom-stickyMapTop+（parseInt（$（'mapContainer'）.css（“marginTop”）.replace（'px'，''）；
$（窗口）。滚动（函数（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度>768）{
if（$（窗口）.scrollTop（）>stickyMapTop&&$（窗口）.scrollTop（）=stickyMapBottom）{
//二次定位检查以查看要应用的新定位样式？
$（'#mapContainer'）.css（{位置：'relative'，顶部：directoryBottom，左侧：'0px'}）；
}如果（$（window.scrollTop（）

我假设这是因为在某一点上，为了使贴图具有粘性，我将其“固定”，这可以说是将其从DOM中移除？而且它没有被其他元素所尊重/看到

我能让两个人都工作吗

要签出的示例（实时）URL：（请阅读下面的评论以了解）

**URL已删除，因为线程似乎已死亡。：）

---

****将####替换为一个。在url.*

中，您是否可以发布一个示例，说明您是否实现了“粘性”映射行为来回答你是否能“两者兼顾”的问题？答案是肯定的。当页面加载时，我“sorta”有一个活生生的例子供您查看（在主帖子中发布链接）。。使用FireBug查找应用于“目录”（ID）的样式。删除：width:74.5%的样式，然后一旦滚动，您将看到左侧容器/搜索结果如何“全宽”并与地图容器元素重叠（在顶部）。在当前状态下，您将无法真正测试搜索结果容器的“流体”方面。。（由于站点本身没有设置响应/断点…直到大约768px宽…在此情况下，我将地图移到顶部…因此地图容器的100%宽度占用空间不再是一个问题/问题。（希望有意义）如果没有引起问题的行为的例子，很难给出一个好的答案；实际上，人们只能猜测。就像@HelmutGranda所说的，这是很有可能的。URL被删除了..因为几个月没有人响应。