Scroll 固定元素在滚动时具有上/下限制

我在另一个DIV元素的右边有一个元素（googlemap）

当我滚动页面时，页面（结果、地图等）都会一起滚动。当地图元素/容器位于顶部时。。我停止滚动它，并将CSS position属性设置为fixed

到目前为止，这是非常有效的

然而。。我注意到，如果我的浏览器窗口很短/高度很小…（只是碰巧它的大小是这样的，没有什么好的理由）。。然后我滚动。。地图实际上会重叠/覆盖我的页脚内容

下面是我当前的jQuery片段，它执行我的滚动（将类应用于map容器元素）

很好/很好。。但如果我的浏览器窗口重新调整为一个小的高度（而不是宽度）。。。您可以看到，内容在页脚内容上滚动/超出/重叠

是否有一个最低限度或其他一些条件检查，我可以做，以防止这种情况

目标： 我喜欢现在的工作方式。。我只是想确保它永远不会与页脚内容重叠

可能是：（伪代码）

（因此mapContainer的底部不能滚动到directoryContainer的底部之外）

然后是：

if($(window).scrollTop() > stickyMapTop && $(window).scrollTop() < stickyMapBottom){

看看有什么新的定位方式可以应用

---

有人吗？。。还是这又是一条死胡同？

因为没人愿意回答。。。我自己解决了。（谢谢）。。但对于其他可能正在解决同样问题的人来说

以下是我的解决方案/答案，用于添加固定元素滚动的顶部和底部阈值（或者在其中保持“固定”更合适）

//粘性贴图放置
$（函数（）{
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（）；
如果（视口宽度>1024）{
if（$（窗口）.scrollTop（）>stickyMapTop&&$（窗口）.scrollTop（）=stickyMapBottom）{
//二次定位检查以查看要应用的新定位样式？
$（'#mapContainer'）.css（{位置：'relative'，顶部：directoryBottom，左侧：'0px'}）；
}如果（$（window.scrollTop（）

希望它能帮助其他人。：）

var stickyMapBottom = (Bottom of DIV: (directory) - mapContainer Height);

if($(window).scrollTop() > stickyMapTop && $(window).scrollTop() < stickyMapBottom){

//sticky map placement
        $(function(){           
            var stickyMapTop = $('#mapContainer').offset().top;  
            var stickyMapBottom = ($('#directory').offset().top + $('#directory').outerHeight())  - ($('#mapContainer').outerHeight() + 43);

            $(window).scroll(function(){
                console.log("TOP THRESHOLD: "+stickyMapTop);
                console.log("BOTTOM THRESHOLD: "+stickyMapBottom);
                console.log("CURRENT POS: "+$(window).scrollTop());
                var viewportWidth = $(window).width();
                //console.log("View Port Size Check: "+viewportWidth);
                if(viewportWidth > 1024){
                    //console.log("More than 768px width, ok to 'sticky'!");
                    if($(window).scrollTop() > stickyMapTop && $(window).scrollTop() < stickyMapBottom) {
                        $('#mapContainer').css({position: 'fixed', top: '0px', left: $('#mapContainer').offset().left});
                    } else {
                        //$('#mapContainer').css({position: 'static', top: '0px'});
                        $('#mapContainer').css({position: 'static', top: $('#mapContainer').offset().top});
                    }
                }else{
                    //do nothing
                    //console.log("Less than 768px width sucka!");
                    $('#mapContainer').css({position: 'static', top: '0px'});
                }
            });
          });

else {
    //$('#mapContainer').css({position: 'static', top: '0px'});
    $('#mapContainer').css({position: 'static', top: $('#mapContainer').offset().top});
}

//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 > 1024){
                    if($(window).scrollTop() > stickyMapTop && $(window).scrollTop() < stickyMapBottom) {
                        $('#mapContainer').css({position: 'fixed', top: '0px', left: $('#mapContainer').offset().left});
                    }else{
                        //original
                        //$('#mapContainer').css({position: 'static', top: '0px'});
                        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'});
                }
            });
          });