javascript - 使用 CSS 将文本定位在固定文本之上

Question

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

如何使用我的 CSS/jQuery 执行此操作？

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

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:

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

CSS:

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

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