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........
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.
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):
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With