如何在页面上固定图像，但文本覆盖移动？

Question

所以我试图弄清楚我将如何编写与此网站类似的内容：http://www.nataliads.cl/以及如何让文本向下滚动一定长度，但不能让图片移动。

Answer 1

如果您试图在下方移动图像上方保留浮动的文字或图片块，则可以使用css＆＃34; position：fixed;＆＃34;。

    .fixedBackground {
      width: 100%;
      position: fixed;
      top: 0;
    }

例如： https://jsfiddle.net/NYCguyJason/vxcj31zj/

或相反...... （因为你的措辞有点令人困惑） 如果您试图让固定位置图像在页面其余部分滚动时不移动，请尝试以下示例：

https://jsfiddle.net/NYCguyJason/4n9ab0x6/1/

.fullwidthblock {   /* this is the first background */
  position:relative;
  z-index:1;
}
.floating-block{  /* this is the floating block */
  position: fixed;
  z-index:2;
}
.stayOnTop{     /* this is for all blocks further down the page that should always stay on top*/
  position:relative;
  z-index:3;
}

<强>编辑 的编辑 **编辑根据您的新评论**

根据您的意见，这里有一些其他想法可以更接近您所描述的内容：

<强> 1。纯CSS： 设置＆＃34; z-index＆＃34; s，以便某些元素保持在其他元素之上。 （最高的z-index保持在最高位置。你必须设置＆＃34;位置＆＃34;要使用的东西＆＃34; z-index＆＃34;）

演示： https://jsfiddle.net/NYCguyJason/vxcj31zj/1/

https://jsfiddle.net/NYCguyJason/bn9ekcds/7/

<!-- grab jquery  -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- grab plugin script -->
<script type="text/javascript" src="https://cdn.rawgit.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed-min.js"></script>

<!-- trigger the plugin -->
<script type='text/javascript'>
$(window).load(function(){
$('.floating-block').scrollToFixed({
  marginTop: 80,  //how far from the top of the window to start
//  limit: $($('.stayOnTop')).offset().top
  limit: 550   //when to make the fixed element start scrolling up
});

});
</script>

？您的网站上有jquery吗？

<强> 2。自定义Javascript或Jquery： 保持元素固定，直到滚动到某个点，然后使其向上滚动。 这里有一个答案:(但它似乎使用旧版本的jquery） Stopping fixed position scrolling at a certain point?

第3。一个完整的Jquery插件：

粘性套件 http://leafo.net/sticky-kit - 看好了

ScrolTo已修复 http://bigspotteddog.github.io/ScrollToFixed/ - 这看起来是你最好的选择，所以我更新了jsfiddle以显示这个选项：

{{1}}