title: Limited scrolling for an Image
body: <p>I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.</p>
  
  <p>Please see below........
  <img src="https://i.stack.imgur.com/JKnGP.jpg" alt="enter image description here"></p>
  
  <p>A: My mobile website contains a lot of content which exceeds the windows height</p>
  
  <p>B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height</p>
  
  <p>C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down</p>
  
  <p>May I know how can I achieve C ??</p>
  
  <p>Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.</p>
  
  <p>It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........</p>
  
  <p>Many thanks.</p>