We Keep Coding

Fixed element in -webkit-overflow-scroll is not actually fixed with iOS safari

I have a fixed footer with scroll and fixed element inside the footer like bellow.
.footer {
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.footer .fixed {
position: fixed;
}
When I scroll the footer, the fixed element inside the footer bounces.
Here is my jsbin. Please access with your iPhone/iPad.
https://output.jsbin.com/wiyewi
Scrolling the bottom red area makes blue square element bounce. With iPad, it moves really big.
As you can see in the input, the element's DOM position ($('blue').position().top) does not change at all. Only the 'visual element' is moving.
Does anyone know how to fix this? I know there are some similar question but none of them are answered...
-webkit-overflow-scrolling touch doesnt work with fixed elements
Position fixed and -webkit-overflow-scrolling: touch;

Responsive menu extending beyond page height

I have a responsive menu that extends beyond the page height, which means users cant see the lower menu items on short pages (pages with little content)
jsfiddle -http://jsfiddle.net/ashconnolly/QDznX/
I understand that it is because my nav is positioned absolute, however if I set the nav to position relative, it pushes the page content below it down.
How could I manage my html + css better to fix this?
OR
In javascript how do I set the body height to be the same as the menu, when the body height is less than the menu height?
Hope you can help!

you can achieve this by CSS
Just add couple of css properties for overflow and height for nav.active
nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
height: 100%;
overflow: auto;
}
Here is a fiddle

Scroll a page with 100% height fixed div which always on top and shouldn't cover the footer

http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?

The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).

I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.

Why are two vertical scrollbars showing?

I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:
$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
$('#wrapper').remove();
$('body').css('overflow', 'scroll');
return false;
});
At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.
HTML:
<div id="wrapper">
--- some content ----
</div>
<div>
--- rest of the website ---
</div>
CSS:
#wrapper {
background-color: #CCC;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
height: 800px;
}
What has gone wrong?

Found a solution to my problem. I just needed to add:
$('html').css('overflow', 'hidden');

You also can use this, in case something from a theme or style is causing the second bar
html {
overflow-x: initial !important;
}

In my case I tried
$('html').css('overflow', 'hidden');
which was removing the two sidebar but I was unable to scroll down to footer.
I used:
$('html').css('overflow-x', 'initial');
Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom

None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div>. I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main. Reference the screenshot below.

By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll
http://jsfiddle.net/DmqbU/2/
This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)

This solved the problem for me:
body{overflow-y:auto}

Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.

add these lines to your style.css code:
html {
height:100%;
width:100%;
margin:0%;
padding:0%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}

Fixed positioned Div with dynamic height

I have a Fixed positioned DIV whose content is appended using jquery.
When its height become greater than the screen size i cant see the contents at the bottom of the DIV.
To see the lower down i need to use zoom tool of the browser.
Is it possible that div becomes scrollable if its height increased than a specific limit.
Any help is appreciated.

You can set the max-height CSS property on the div, and it will increase to be no larger than the value you specify. Then set overflow: auto to make it scrollable when content is outside of the viewable area.

Use css to get scrolling functionality:
overflow: scroll

Assign a class to div
try this ..
.className
{
height:100px; \* default hight of the div*\
overflow: auto;
}

Try something like:
set height: auto; If you want to have minimum height to x then you can write
height:auto;
min-height:30px;
height:auto !important;
height:30px;

just set max-height for the div
*html yourdiv {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
overflow:auto;
}
yourdiv{
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:auto;
}