In WordPress theme, there are sticky and fixed headers. I am confused about their difference. In my opinion, sticky header is the one which sticks on the top while user scrolls page up/down. And the fixed header moves with the page scroll.
Some websites use the term Sticky and fixed alternatively that means both are same. Then what that header is called which moves with the page scroll?
I suppose the fixed header is always on the same position during the page scroll.But the sticky header maybe scroll with the page at first, and from a certain point it goes to the fixed type. Just like the right subnavigation of bootstrap document. http://v3.bootcss.com/css/
Also bootstrap provide a js plugin to achieve the sticky effect http://v3.bootcss.com/javascript/#affix
Related
I am working on a large website for a client and we have run into an issue with the previous designers structure. The footer does not stay at the bottom of the content when it is dynamically generated. I have hidden divs that are opened with links. These divs contain user comments. When both are opened the footer overlaps some of the content. When I zoom in the footer overlaps some of the main content. I've tried:
Ryan Fait's CSS and HTML5 Sticky Footers
How to keep footer at the bottom even with dynamic height website
CSS Reset Sticky Footer
Prevent footer from overlapping
All with no success. Is doing a full restructure the only option? I've also tried using JavaScript to make the footer stay at the bottom of the content. But once the document is loaded and the height changes, the footer doesn't move with content. Ideas? The code I have is very long - 4000 lines of css, 2000 lines of HTML. Should I post part?
I've completely at logger heads with how I can get this footer to align with the bottom of the sidebar if zero content is in the space between the header and footer.
Sticky footer is not the solution because I don't want it to be at the bottom of the window. But inline with the bottom of the sidebar instead.
Here is an image of what it should look like but without the coloured blocks there at the moment they push the footer down where it is now.
I can't provide much code as this is on my local server, and is segmented and broken down into different files for wordpress.
screenshot http://s3.amazonaws.com/awesome_screenshot/2110547?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1368128529&Signature=GjSmfhU6%2BZoYmSUj6oMEcvNXTEs%3D
as you can see the above screenshot is how I want the sidebar and footer to be with no content there.
Here is another screenshot showing my current problem, you can see how it latch's on to the bottom of any content on the page and sticks just below it.
http://awesomescreenshot.com/015198m642
Thanks in advance.
The sidebar needs a float:right; then create a div between sidebar and footer with clear:both;, have the css for your footer include margin-top:-xx (whatever pixels the footer height is). You might also need to throw a position:relative on there.
http://jsfiddle.net/uuTDG/
Fixed this by adding position relative to my container, then adding position absolute and bottom 0 to my footer.
Thanks anyway for the help
I have a web page with a fixed position header (Z-index:1000). The body of the page is a lower z-index and scrolls underneath the header.
When I pinch/zoom the page on my smartphone, the header is detached from the webpage and zooms separately, overlapping the body.
I want the header to remain on top of the page attached.
Here is the link: TEST PAGE
This has always been an issue with touchscreen devices. I don't believe there is a pure css solution for this, since the pinching/zooming will move the entire viewport, and not just the element that you are touching. You may have to resort to a javascript based solution. See here for an extensive list. http://bradfrostweb.com/blog/mobile/fixed-position/
Hello i am building a mobile webpage where my content only will be scrolling and my footer and header is position:fixed - Can i make the content so that it doesn't scroll under the header or footer , so that it just scrolls in it's own div.
The reason why i want to do this is that i am going to have some opacity on my header and footer and if the content gets scrolled under , it's just not looking good.
Heres a jsfiddle i made to just show you the example of the scroll
http://jsfiddle.net/VNVqs/
Here you are:
http://jsfiddle.net/VNVqs/3/
I just removed the position: absolute to the scrolling part (wrapper and scroll-content), and added some padding to the wrapper in order to let the first and last item not being under header and footer.
Basically, the trick is done by using position: fixed only on header and footer, and let the rest of the page to scroll as a normal page, without using overflow: auto on a specific fixed-height element. Doing this way, the only problem is that the first lines of your content will be always under the fixed-positioned header (and last ones under the footer), but you can fix this by applying some padding on the content wrapper, as much as header (and footer) height. You got it?
When master page parsed content div always is at the very bottom. So how i can set footer to be at the bottom while not using position absolute. If you use position absolute you have to set every different page height and footer position according to the this is which i don't want. Thank you.
The most practical solution is to set a min-height in your CSS of around 700px for the main content area between header and footer.
Alternatively, you could try this (but not tested yet in modern browsers):
http://codersbarn.com/post/2008/09/10/CSS-Sticky-Footer-for-ASPNET-Master-Page.aspx
This is something I needed to implement recently on a project.
Checkout the following jsFiddle: http://jsfiddle.net/uHZgY/
Edit (Based on comment)
If what you require is a floating footer, then checkout this other SO question: How do I get a floating footer to stick to the bottom of the viewport in IE 6?.
The correct answer implements this without the need for absolute positioning of the main content.
I have taken the correct answer and created a jsFiddle for you so you can check it out.
http://jsfiddle.net/mStef/