How to make a “Fixed” element Scrollable

StackOverflow https://stackoverflow.com/questions/9383906

Question

I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.

I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.

Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.

So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.

But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.

If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.

Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.

Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!

Was it helpful?

Solution

I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.

I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>

OTHER TIPS

I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...

quick JQuery example:

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.

It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top