How do I have a image stay fixed on the page but have a text overlaid move?

Question

So I'm trying to figure out how I'd go about coding something similar to this website: http://www.nataliads.cl/ and how to have the text scroll down for a certain length, but not have the picture to move.

Answer 1

If you are trying to keep a floating block of text or image above the images moving underneath, you can use css "position:fixed;".

    .floating-block{
      position: fixed;
      top: 25%;
      right: 25%;
      width: 50%;
      border: 3px solid red;
      background-color:white;
    }

example: https://jsfiddle.net/NYCguyJason/vxcj31zj/

Or the opposite... (because your wording is a bit confusing) If you are trying to have fixed position image which does not move while the rest of the page scrolls, try this example:

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

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

Edits Edits **EDITS Per your new comments **

Per your comments, here are some additional ideas to get closer to what you described:

1. Pure CSS: Set the "z-index"s so that certain elements stay on top of others. (highest z-index stays on top. You must set the "position" to something to use "z-index")

demo: https://jsfiddle.net/NYCguyJason/vxcj31zj/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;
}

?Do you have jquery on your site?

2. Custom Javascript or Jquery: Keep the element Fixed, until you scroll to a certain point, and then make it scroll up with you. There's an answer here: (but it seems to be using an older version of jquery) Stopping fixed position scrolling at a certain point?

3. A full Jquery plugin:

Sticky Kit http://leafo.net/sticky-kit --Seems okay

ScrolTo Fixed http://bigspotteddog.github.io/ScrollToFixed/ --This looks like your best bet, so I updated the jsfiddle to show you this option:

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>