固定放置在特定区域内的元素

Question

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

地图大约 240 像素宽，大约 600 像素长/高。

此地图位于包含地图的容器 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() 部分中的 nothign 永远不会触发。

使用的其余代码：

#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;
        }

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

当您一直滚动到顶部时，它会停止“被固定”..（它会在页面的其余部分滚动到某个点时开始移动）..并且它不会一直向下覆盖页脚也是。

我不清楚为什么 jQuery 部分没有触发.. 我不清楚最后一个样式是做什么用的？ （看起来很奇怪）

所有这些绝对的、固定的、相对的、相对于父级、相对于视口..等等......都是令人困惑的。

任何易于阅读/遵循/理解的教程可以让我到达我想去的地方？或者关于我在正确方法上做错了什么的建议？

Answer 1

我看了你的 Fiddle 并注意到了几件事：

1. CSS 中没有表示您的“固定”类。当我查看 CSS 时，我看到了一个 span 元素，其中包含一个带有位置属性集的“.fixed”引用。

2. 您正在使用 ID 设置 mapContainer div 的样式。按照 CSS 选择器的顺序，这是一个非常严格的选择器。 CSS 选择器的层次结构是指定的，ID 将覆盖类型和类。见：http://htmlhelp.com/reference/css/structure.html

3. 滚动时，我看到控制台正在登录我的开发工具。此外，在检查元素时，我看到它添加和删除了类名。

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

#mapContainer.fixed { position: fixed; }

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

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

更新：最新的 Fiddle (v12) 存在几个问题：

1. 当您滚动时，侧边栏将始终固定不变，因为从不计算“顶部”。它被设置为零，并且偏移量计算被注释掉。

2. 绝对定位是相对于最近定位的父级。如果没有定位父对象，则它是相对于窗口的。要约束绝对定位元素，请将约束父级设置为“position:relative;”。

3. 考虑将侧边栏相对于“contentContainer”向右定位，而不是使用百分比和左侧位置规则。

4. 当固定位置生效时，我们还需要设置侧边栏固定左侧位置。否则，它将使用 CSS 中的定位。相对于绝对定位，Fixed 定位是相对于窗口而言的，即绝对元素“right: 10px”将距离定位的父级右侧10px，但在固定时会出现在距离窗口右侧10px 处。

5. 当你有绝对定位时，你不需要浮点数。绝对位置从文档的正常流程中删除一个元素，因此浮动不适用。

我更新了 Fiddle 以展示如何进行这些调整。我从 mapContainer 中清除了浮动和边距，并保留了绝对定位。有了它，我将 contentContainer 设置为相对于将 mapContainer 约束到它。您还将看到，在脚本方面，我添加了一行来设置 mapContainer 的偏移量。如果没有这个，当它被固定时，它将离开窗口的右边框 10px。

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

此外，您希望保持顶部偏移线完好无损。没有它，它会在滚动移动的那一刻固定下来并且永远不会返回。在这种情况下，您最好将其设置为永久固定。

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

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

1. 调整侧边栏的大小，使其缩小到窗口大小。这在我的第一篇文章中的示例中进行了演示，缺点是它强制侧边栏成为可滚动的 div，因此子内容全部可见。

2. 使用底部检查，以便在达到限制时，容器返回到绝对位置，但在底部设置一个：父级的 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 有一个固定的侧边栏通过页脚。 ;)