This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: fixed position on x-axis but not y?
I have a HTML page which is supposed to scroll horizontally which has a fixed position header tag.
In the case that a vertical scrollbar appears (resize window) I want the header to scroll relative with the rest of the content.
Can anyone think of a possible non-javascript solution?
Fixed position has pretty lousy support on iOS devices. Instead of using a fixed position for your header, you should leave it static on the page. Surround your content you want to scroll horizontally with a container with overflow: auto, so that the content scrolls rather than the entire page.
Preview: http://jsfiddle.net/Wexcode/vfZjb/
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
Stick div to bottom of screen and when the content gets longer than the screen and you have to scroll make the div go down with the content but wont come shorter than bottom of the screen.
QUESTION: How do i get a div to stick to bottom of screen and move down when the content gets longer than the screen where you have to scroll?
You have to position your HTML content the right way. Let's assume you want the footer tag at the bottom, so you need to put it as the last element in your body tag.
If you want to "simulate" space on your page before the actual content is put in, you can add a div with a specific height (for example 800px) that will stretch your page.
This question already has answers here:
offsetting an html anchor to adjust for fixed header [duplicate]
(28 answers)
Closed 8 years ago.
I'm working on a site with a Sticky Navigation and when I use
Example Link
the Sticky Nav overlaps the top of the #example.
The Nav height is 70px so I'm wondering if there's any way to link to #example but start 70px down. I'd rather not create an additional ID since it will probably make things a mess.
Any ideas?
You can use
window.scrollBy(0,70);
to scroll the window 70px down.
To have it actually scroll after linking, you have to change your link such that it executes a javascript relocation before scrolling: window.location='#example'; window.scrollBy(0,70);
That is the job of #example. It moves you to the location of the element with that id.
You can use jQuery to animate your elements to slideUp or your window to scrollTo 70px down.
Working on the site www.bedriftsdesign.no I made both the navigation and the #landing-text (on top of the header image fixed.
When I changed their position to fixed though something else happened. Although they'll stay fixed when scrolling vertically, if you scroll horizontally (especially on a small screen) they won't stick to their place.
So my question is, can I make something fixed (vertically) and relative (horizontally)? If so, how?
Here's an example of a site where it works, and approximately what I'm trying to get: www.googleventures.com
Thanks
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make a <DIV> occupy all VISIBLE height screen, with content below it
This probably has a strange title as I was not sure how to call this, however I am wanting to make a website similar to fiftythree.com where you see the homepage but then if you scroll down the navigation buttons appear. No matter the screen resolution if you open the website it will always be hidden until you scroll down. What is this called and how could I go about replicating it, thanks!
Have you tried making a div for your navigation and a div for your main content.
This website does not have a fixed navigation bar.
You might want to consider using a fixed position in your css if you want the navigation bar to be fixed. Also you might want a minimum width for your body tag (also css). This avoids your navigation elements stacking up on a small window.
I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.
Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.
Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.
http://www.louiswalch.com/beta/t/_scrolltest4.html
I don’t think you can achieve that without JavaScript.
position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.
You can't have position:fixed on an overflow scrolling content. You need to use JavaScript for this. i answered a similar question using jQuery at Fixed header inside scrolling block where a div is fixed even if content is scrolling by overflow.
Check working example at http://jsfiddle.net/VswxL/3/