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

时间:2015-03-11 19:53:40

标签: javascript jquery html fixed elements

我有一个页面,其中显示了来自数据库查询的一长串结果列表..我还在这个长列表的右侧显示了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部分没有解雇..而且我不清楚最后一种风格是什么? (看起来很奇怪)

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

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

1 个答案:

答案 0 :(得分:1)

我看着你的小提琴,发现了几件事:

  1. 您的&#34;已修复&#34; class没有在CSS中表示。当我查看CSS时,我看到一个包含&#34; .fixed&#34;具有位置属性集的引用。

  2. 您正在使用ID为mapContainer div设置样式。这是一个非常严格的选择器,因为CSS选择器的顺序。 CSS选择器的层次结构是特定的,ID将覆盖类型和类。请参阅:http://htmlhelp.com/reference/css/structure.html

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

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

    #mapContainer.fixed { position: fixed; }
    

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

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

    更新:最新的小提琴(v12)有几个问题:

    1. 在您滚动的那一刻,侧边栏将始终固定,因为&#34; top&#34;从未计算过。它被设置为零,并且偏移计算被注释掉。

    2. 绝对定位是相对于最近定位的父级。如果未定位父级,则它相对于窗口。要约束绝对定位元素,请将约束父元素设置为&#34; position:relative;&#34;。

    3. 不要使用百分比和左侧位置规则,而应考虑相对于&#34; contentContainer&#34;将侧边栏放置在右边,按照一定的像素数。

    4. 当固定位置生效时,我们还需要将侧边栏固定在左侧位置。否则,它将使用CSS中的定位。与绝对定位相比,固定定位是相对于窗口的,意味着绝对元素&#34;右:10px&#34;将从定位父项的右侧10px,但在修复后将从窗口右侧显示10px。

    5. 绝对定位时,你不需要浮动。绝对位置从文档的正常流中删除元素,因为此浮动不适用。

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

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

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

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

      关于底部边界,你可以做几件事:

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

      2. 使用底部的检查,以便当您达到限制时,容器返回到绝对位置,但在底部设置一个:父级的0。

      3. 类似的东西:

        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有一个固定的侧边栏通过了页脚。 ;)