Question

我在另一个DIV元素的右边有一个元素（谷歌地图）..

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

到目前为止，这已经很有效了......

然而..我注意到，如果我的浏览器窗口在HEIGHT中很短/很小......（恰好是因为没有充分理由让它的大小如此）..然后我滚动...地图实际上重叠/覆盖我的页脚内容。

这是我当前的jQuery片段，用于滚动（将类应用于地图容器元素）

$(function(){           
        var stickyMapTop = $('#mapContainer').offset().top;  
        $(window).scroll(function(){
            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) {
                    $('#mapContainer').css({position: 'fixed', top: '0px', left: $('#mapContainer').offset().left});
                } else {
                    $('#mapContainer').css({position: 'static', top: '0px'});
                }
            }else{
                //do nothing
                //console.log("Less than 768px width sucka!");
                $('#mapContainer').css({position: 'static', top: '0px'});
            }
        });
      });

工作得很好/很好..但如果我的浏览器窗口重新调整为小HEIGHT（不是宽度）...你可以看到事情滚动/超出/重叠页脚内容。

我是否可以采取最低阈值或其他条件检查来防止这种情况发生？

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

可能类似于:(伪代码）

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

（因此mapContainer的底部无法滚动到directoryContainer的底部）

然后像：

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

..... etc..etc ..

想法？麻烦我没有看到/理解？也许我只是用这个吠叫错误的树？

这是我的真实世界：

//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'});
                }
            });
          });

它更接近......它不再覆盖/重叠页脚内容..

然而，当我达到最低阈值时..它将位置再次设置为静态顶部：0 ..我改为偏移（）。顶部...认为它只会留在原处/当前处于..直到我向上滚动。迷路了......我需要在这里进行二次条件检查：

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

看看要应用哪种新的定位方式？

任何人？或者这是另一个死岗？

Answer 1

因为没有人打扰回答......我自己完成了这项工作。（谢谢）..但对于其他可能正在解决相同问题的人来说..

这是我的解决方案/答案添加TOP和BOTTOM阈值你的固定元素滚动（或保持'固定'在我猜中更合适）..

//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'});
                }
            });
          });

希望它可以帮助别人。：）

滚动期间固定元素的顶部/底部限制

1 个答案: