css - 到达顶部后的粘性 div 横幅

Question

我想构建以下 UI 行为: 我有一个响应式内容，后面是一个新部分，这个新部分应该有一个背景图像，而不是随页面滚动，直到到达顶部，然后卡住在顶部。

我进行了研究并找到了一些类似的答案，但找不到任何特定于我想要的答案。

我不想使用固定在 TOP LEFT 的背景图像，因为我不希望图像从页面顶部开始。

这个问题让我有了一个良好的开端:
How can I make a div stick to the top of the screen once it's been scrolled to?

这个 fiddle 也有我想做的部分内容，但还没有，我很困惑。 (我以某种方式破坏了这段代码，同时试图自己跌跌撞撞。假装大红色框是背景图像 div。
http://fiddle.jshell.net/5y2b4xoL/

本质上，背景图像在滚动到页面顶部之前不应固定，此时它应该固定。

感谢任何帮助。

Answer 1

你可以使用 jQuery scroll() 所以当滚动到达你的元素时它会通过改变 position 让它粘住，

请看下面的片段:

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 155;
    // set to whatever you want it to be

    if (y_scroll_pos > scroll_pos_test) {
        $("#scroller").css("position", "fixed");
        $("#scroller").css("top", "0");

    } else {
        $("#scroller").css("position", "relative");
        $("#scroller").css("top", "auto");
    }
});

body {
    min-height: 1400px;
  background:yellow;
  margin: 0;
  }
  h1 {
    margin-bottom: 100px;
  }
  #scroller {
    background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
  nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
  turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
  non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
  </div>
  . Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
  tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
  fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
  Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
  cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
  porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
  et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
  Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
  Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
  sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
  non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
  nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
  Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
  Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
  Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
  pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
  et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
  . Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam 
  elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
  consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
  a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
  molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
  Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
  bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
  Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
  tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
  Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.