offset top scroll
- Started
- Last post
- 14 Responses
- dbloc
is there a way to offset the top scroll. So if I have a header image, I want everything to scroll under that.
the header image is transparent with the background showing through.
- crillix0
Two ways I ran across achieving that would be to fix position the header and have a padding-top on the body, or use a spacer div. The spacer div is nice for instances where you don't need the padding.
- Spacer div kind of smack of old-school spacer GIFs and spacer tables. Not the best way to go.Continuity
- I agree but I think there are some instances where its handy to have that div. Maybe...crillix
- Continuity0
.header {
position: fixed;
z-index: 9999;
}body {
margin-top: 100px /* or however high your header is */
}Hey presto, job done.
- I'd also probably add top: 0; to the header declaration, too.Continuity
- Also, this is going under the assumption the top edge of your header is flush with the top edge of the browser viewport.Continuity
- yeah it still scrolls under the header though.dbloc
- But ... isn't that what you asked for ... ?Continuity
- dbloc0
Sorry continuity...This one is a little hard to explain.
I want the fullscreen background to show through the header graphic, but the scrolling would end at the bottom of the graphic, so you wouldn't see that.
make sense?
I meant that you wouldn't see the scrolling under the header graphic...
- dbloc0
it seems there is a way to offset the scrolltop.....maybe not
- fresnobob0
im no web designer, but to "offset the scrolltop" wouldn't you instead just offset the graphics?
- ArmandoEstrada0
draw it.
- dbloc0
what crillex said in the comment.
as if I was using frames, but without using frames. The entire page scrolls below the header.
- Continuity0
Err ... have you got an example of all of this?
- crillix0
I don't know of a way offset the scroll like that. You could do some sort of method of using overflow-y on a wrapper for the content below the header but that can be a mess... or use Javascript to handle scrolling content like...
http://manos.malihu.gr/jquery-cu…
I don't think either way is that ideal though, I would be curious to see a sample too.
- dbloc0
yeah didn't want to get into doing a custom scroller
- crillix0
What about using the image twice, something like...
<style>
html {}
body {
margin: 0; padding: 100px 0 0 0;
}
.header {
position: fixed;
top:0;
width:100%; height:100px;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.header.clip { z-index: 999; }
.content {
background-color: #fff;
width:500px; height:5000px;
margin:auto;
}
.bgimg { background:url(http://goo.gl/v8T... 0 0 no-repeat #f4f4f4; background-attachment: fixed; }
</style>
<body class="bgimg">
<div class="header"></div>
<div class="header clip bgimg"></div>
<div class="content">
Weee
</div>
</body>
- dbloc0
^ unfortunately it's not just a static image....We are using backstretch, so the size varies
- Weyland0
in a container div with hard dimensions and overflow:hidden? then position:absolute the header to keep it in place over the scrolled background?
- monNom0
set it up like this:
image #1: position: fixed; top:0; width:100%;
image #2: visibility: hidden; width:100%;
content...image #1 and #2 are the same image, and image 2 pushes your content down exactly as far as needed for the size that it is scaled to
- use img tag rather than div + background. You can stick the image in a div if you want, I don't care.monNom