更改固定css元素的“起始位置”

我是html和css的新手，我想知道这是否可以在纯CSS中使用。更改固定css元素的“起始位置”

所以我制作了3个div，全部完全符合我的屏幕尺寸。我想知道的是，如果你让“菜单”固定，让它滚动，你能改变它的起始位置吗？

<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上）

对不起，如果问题解释不好，英语不是我的母语。先谢谢你。

来源

2015-10-20 Tom van den Endert

你的意思是说，一旦滚动的蓝色div出现，菜单跳转到它并离开红色的div？ –

我的意思是'菜单'会出现蓝色div等等，但是当你回滚到红色的div时，它会再次坚持蓝色，所以当页面加载时，'menu'将不会可见，直到出现蓝色的div。 –

你想让菜单只出现在蓝色区域，对吧？ –

我知道你提到你想在纯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/

来源

2015-10-20 13:15:50

这就是我一直在寻找的，谢谢。但是，我还不知道如何将JQuery加载到我的html文档中。 –

欢迎您:)您可以从这里下载jquery文件[下载]（http://jquery.com/download/）然后将此标签添加到您的html标头中' ' –

非常感谢您的帮助！我知道我现在听起来可能听起来很愚蠢，但我是否会将代码复制到HTML中的脚本标记中，或者将脚本保存为.js文件吗？ –

您可以使用z-index在红色和绿色div上隐藏“菜单”。

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中删除绿色的z-index和位置参数。

来源

2015-10-20 12:39:30

更改固定css元素的“起始位置”

回答

相关问题