Question

即使用户开始滚动页面，我是否可以随时将heading保持在some other area文本之上？

如何使用CSS / jQuery进行此操作？

CSS：

* { 
  margin: 0; 
  padding: 0; 
}

.site-wrap {
    padding:40px 0
}

.some-other-area { }

h1 {
    position:fixed;
    z-index:1;
    top:0;
    margin:0;
}

h2 {
  padding: 0px;
    margin: 0px 0 20px 0;
}

.floatingHeader {
    position: fixed;
    top: 0;
    visibility: hidden;
}

谢谢

Answer 1

这是你在找什么？

JS：

＆＃13;

var el = $(this),
  offset = el.offset(),
  scrollTop = $(window).scrollTop() + 50,
  floatingHeader = $(".floatingHeader", this)

＆＃13;

CSS：

＆＃13;

.floatingHeader {
    position: fixed;
    top: 50px;
    visibility: hidden;
}

＆＃13;

演示：http://jsfiddle.net/h49p65qa/3/

Answer 2

我是否有可能继续超越其他地区的文字所有时间 - 即使用户开始滚动页面？

您只需更改top类的 css属性 .floatingHeader，以确保它始终低于<h1>Heading</h1>

.floatingHeader {
    position: fixed;
    top: 25px;
    visibility: hidden;
}

这样就可以满足您的两个要求（标题 floatingHeader ）。

如果您正在深入讨论，您可以随时更改z-index demo

使用CSS将文本定位在固定文本上方

2 个答案: