更改固定 css 元素的 "Starting Position"

Question

我是 html 和 css 的新手，我想知道在纯 css.

中这是否可行

所以我做了 3 个 divs，都非常适合我的屏幕尺寸。我想知道的是，如果您将 "Menu" 固定以便它滚动，您可以更改它的起始位置吗？

<div class="red"></div>
<div class="blue">
  <h1>Menu</h1>
</div>
<div class="green"></div>

这是与之配套的 CSS：

.red{
  background-color: red;
  width: 100%;
  height: 1080px;
}

.blue{
  background-color: blue;
  width: 100%;
  height: 1080px;
}

.green{
  background-color: green;
  width: 100%;
  height: 1080px;
}


h1{
  font-size: 100px;
  position: fixed;
  top: 0;
}

所以我的基本意思是，当我在蓝色 div 上向下滚动时，当它在红色 div 上还不可见时，可以修复 "Menu" 吗？（所以它的'starting position'其实是蓝色的div）

抱歉，如果问题解释得不好，英语不是我的母语。提前谢谢你。

Answer 1

您可以使用 z-index 在红色和绿色 div 上隐藏 "Menu"。

CSS:

.red{
background-color: red;
width: 100%;
height: 1080px;
z-index:3;
position: relative; 
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
z-index:1;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
z-index:3;
position: relative; 
}
h1{
font-size: 100px;
position: fixed;
top: 0;
z-index:2;
}

示例：http://jsfiddle.net/3k3wyscL/

但是这个解决方案的问题是添加另一个仅在红色或绿色上可见的文本 div。

编辑：正如您希望在绿色 div 上看到 "Menu" 一样，您可以删除 css 中的绿色 class z-index 和位置参数。

Answer 2

我知道你提到你想要纯 css 的解决方案，但如果你想使用 JQuery 这将是一个解决方案。

使菜单成为绝对菜单：

.persist-menu
{
   position: absolute;
}

右键更新菜单位置的函数

function UpdateMenuPosition() {
       var el             =  $(".blue"),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".persist-menu", el)

       if (scrollTop > offset.top) {
           floatingHeader.css({top:(scrollTop)});
       } else {

       };
}

滚动时调用

$(function() {

   $(window)
    .scroll(UpdateMenuPosition)
    .trigger("scroll");

});

查看演示：http://jsfiddle.net/wfff74w9/4/

更改固定 css 元素的 "Starting Position"

Changing "Starting Position" of a fixed css element

position

fixed