Question

我有一个页面，其中显示了来自数据库查询的一长串结果列表..我还在这个长列表的右侧显示了Google Map。

地图大约是240px宽，可能是600px长/高。

此MAP位于包含地图的容器DIV（#mapContainer）中，以及地图画布上方的下拉框。

目前，mapContainer与页面本身一起滚动..我想要做的是将它作为静态/固定元素。所以它开始/显示/放在我当前在页面上的位置....如果我滚动页面..地图应该保持固定..直到结果的结尾（底部）滚动到..

（我不希望mapContainer滚动并覆盖页脚元素/ div）

遵循本教程： http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/

它没有保持固定..

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

                    $(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");
                        }
                    });

                }
            });

第一个console.log（）输出正常..但是在window.scroll（）部分中没有输出。

使用的其余代码：

#mapContainer{
            display:table; 
            width:240px; 
            float:right;
            /* sticky map */
            position: absolute;         
            top: 458px;
            left: 50%;
            /* width: 100px; */
            margin-left: 339px;         
        }
        #<span class="skimlinks-unlinked">mapContainer.fixed</span> {
            position: fixed;
        }

在教程页面本身..左侧有一个工具栏..

停止＆＃39;被修复＆＃39;当你一直滚动到顶部..（它将开始移动，页面的其余部分在某一点滚动）..并且它不会一直向下覆盖页脚。

我不清楚为什么jQuery部分没有解雇..而且我不清楚最后一种风格是什么？（看起来很奇怪）

所有这些绝对的，固定的，相对的，父母的，以及视口......都是令人困惑的。

任何易于阅读/遵循/理解的教程都会让我到达我想去的地方？或者建议我采用正确的方法做错了什么？

Answer 1

我看着你的小提琴，发现了几件事：

您的＆＃34;已修复＆＃34; class没有在CSS中表示。当我查看CSS时，我看到一个包含＆＃34; .fixed＆＃34;具有位置属性集的引用。
您正在使用ID为mapContainer div设置样式。这是一个非常严格的选择器，因为CSS选择器的顺序。 CSS选择器的层次结构是特定的，ID将覆盖类型和类。请参阅：http://htmlhelp.com/reference/css/structure.html
滚动时，我看到控制台登录了我的开发工具。此外，在检查元素时，我看到它添加和删除类名。

根据我的观察，修改容器的CSS选择器应该可以解决问题。将ID添加到类中将使CSS规则保持足够的特定性：

#mapContainer.fixed { position: fixed; }

有关这些更改的示例，请参阅此更新的小提琴： http://jsfiddle.net/pmurst8e/4/

更新：为了演示我使用调整大小的内容，我稍微修改了您的示例。它并不是最漂亮的，但它传达了一点：http://jsfiddle.net/pmurst8e/6/

更新：最新的小提琴（v12）有几个问题：

在您滚动的那一刻，侧边栏将始终固定，因为＆＃34; top＆＃34;从未计算过。它被设置为零，并且偏移计算被注释掉。
绝对定位是相对于最近定位的父级。如果未定位父级，则它相对于窗口。要约束绝对定位元素，请将约束父元素设置为＆＃34; position：relative;＆＃34;。
不要使用百分比和左侧位置规则，而应考虑相对于＆＃34; contentContainer＆＃34;将侧边栏放置在右边，按照一定的像素数。
当固定位置生效时，我们还需要将侧边栏固定在左侧位置。否则，它将使用CSS中的定位。与绝对定位相比，固定定位是相对于窗口的，意味着绝对元素＆＃34;右：10px＆＃34;将从定位父项的右侧10px，但在修复后将从窗口右侧显示10px。
绝对定位时，你不需要浮动。绝对位置从文档的正常流中删除元素，因为此浮动不适用。

我更新了小提琴以显示如何进行这些调整。我清理了mapContainer中的float和margin并保留了绝对定位。有了它，我将contentContainer设置为相对于约束mapContainer。您还将看到，在脚本方面，我添加了一行来设置mapContainer的偏移量。没有它，当它变得固定时，它将偏离窗口的右边界10px。

更新小提琴：http://jsfiddle.net/pmurst8e/14/

此外，您希望保持最佳偏移线。没有它，它会在滚动移动的那一刻得到修复，永不回头。如果情况确实如此，那么只需永久固定即可。

var top = $('#mapContainer').offset().top;    // you want this

关于底部边界，你可以做几件事：

调整侧边栏的大小，使其缩小到窗口大小。这是在我的第一篇文章的示例中进行演示，其缺点是强制侧边栏成为可滚动的div，因此子内容全部可见。
使用底部的检查，以便当您达到限制时，容器返回到绝对位置，但在底部设置一个：父级的0。

类似的东西：

var limit = $('footer').offset().top;
var $mc = $('#mapContainer');
var pos = $mc.offset().top + $mc.outerHeight();

if (pos >= limit) {
    $mc.removeClass('fixed')
       .addClass('bottom-set').css('left',''); // define this in CSS for bottom absoluteness
}

#mapContainer.bottomFixed {
  bottom: 0;
  top: auto;
}

说实话，如果你看一下ScrollToFixed插件（https://github.com/bigspotteddog/ScrollToFixed），你可以节省一些时间来解决这个问题。我最近似乎提到了这个问题，但这个问题现在似乎很受欢迎。

顺便提一下，转到您的OP并单击“编辑”按钮。缩小浏览器的高度并向下滚动。您应该看到SO有一个固定的侧边栏通过了页脚。 ;）

固定在某个区域内放置的元素

1 个答案: