6

I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.

Please see below........ enter image description here

A: My mobile website contains a lot of content which exceeds the windows height

B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height

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

May I know how can I achieve C ??

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.

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........

Many thanks.

Kit Ng
  • 993
  • 4
  • 12
  • 24

1 Answers1

1

While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.

The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.

While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.

Markup outlines:

<body class="no-scroll">
  <section class="content">
    /* content here */
  </section>

  <aside class="overlay">
    <img src="img.jpg">
  </aside>
</body>

CSS:

.no-scroll {
  overflow: hidden;
  position: fixed;
}

.overlay {
  overflow-y: scroll;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
}

.overlay img {
  width: 100%;
  height: auto;
}

.no-scroll .overlay {
  display: block;
}

With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.

Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):

  1. Full screen
  2. With markup/CSS visible

Edit:

In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.

Edit 2:

As requested, here's a jQuery function to toggle the effect.

$(".close").click(function() {
  $("body").toggleClass("no-scroll");
});

Just give a <button> or whatever the class name close and it'll toggle the effect on and off.

Nils Kaspersson
  • 8,816
  • 3
  • 29
  • 30
  • This answer is fantastic! Thank you very much =D – Kit Ng Oct 13 '13 at 12:26
  • Just a add-on question: would it be possible to have the body property resume normal (remove overflow:hidden and position:fixed) when the user close the image layer? – Kit Ng Oct 13 '13 at 12:29
  • Yes. As I wrote in my answer, you'll probably need to use javascript. Since you talked about jQuery I'll give an example using it. See my update in a minute. – Nils Kaspersson Oct 13 '13 at 12:34
  • Any way to do this by normal javascript? Because I may not be able to import the jquery library for some reasons. – Kit Ng Oct 13 '13 at 16:29
  • Yes, it's possible. See this topic here on SO: http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – Nils Kaspersson Oct 13 '13 at 17:11