Question

请看我的小提琴。在这个小提琴中，黑匣子固定在页面上。如果我们滚动页面，黑框也会与地图重叠。我想在地图前停止固定位置。如果我们在地图后掠过页面，黑框应该留在地图之前。我该怎么办？

CSS：

.item{ background:#eee; padding:10px; width:50%; margin-bottom:15px;}
.new_icon{ position:fixed; width:100px; height:100px; background:#000; right:10px;}

http://jsfiddle.net/6f8HK/

Answer 1

无需使用javascript，在iframe中添加ID，将css设置为：

#map
{
    position:relative;
    z-index:2;
}

并为固定元素提供较低的z-index：

.new_icon {
    position:fixed;
    width:100px;
    height:100px;
    background:#000;
    right:10px;
    z-index:1;
}

Js fiddle

Answer 2

将z-index: -1;添加到.new_icon

<强> DEMO

Answer 3

试试这个Working Fiddle。

JQUERY：

   $(window).scroll(function() {

    if ($(this).scrollTop() > 450)
     {
        $('.new_icon').fadeOut();
     }
    else
     {
      $('.new_icon').fadeIn();
     }
 });

注意：如果您不喜欢淡化/淡出效果，请使用.show / .hide。

在特定部分定位固定挡块

3 个答案: