iOS Safari sticky element jumps when address bar shrinks - html

I want an element to be centered horizontally and vertically. The element should also be sticky on scroll.
For this I use { position: sticky; top: 50%; }
The problem is, on safari the element jumps a bit down after the address bar is shrinked.
What I want is that the element does not jump and it should stay the position of vertical before the address bar is shrinked. How can I achieve that behaviour?
Use this site on a iOS device with a bottom address bar https://daffodil-foremost-piper.glitch.me/

{ position: sticky; top: 50vh; }
Top 50% is the visible Area of the screen minus the addressbar (when visible).
Top 50vh is the visible Area without regarding the addressbar

Related

CSS Sticky position not working properly on mobile

I have a button on my OpenCart (2.3.0.2) website with a sticky cart button. The idea is that there is only one page to order from (Just a few sandwiches, no categories and product page needed) so I added a cart button that stays on the top right of the page:
#cart {
position: fixed;
top: 0;
right: 0;
}
This works on the desktop site but on mobile I get the following when scrolling:
As you can see on the top right, the button scrolls up a bit. After this the button scrolls with the page.
Are there any fixes for this issue?
This is related to the issue at Position fixed on chrome mobile causing element to move on scroll up/down
Solution:
<meta name="viewport" content="minimum-scale=1">
#cart {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
right:0;
}
Have you tried position sticky rather than fixed?
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

How to make the orginial website background of a navigation menu fixed and 100% wide?

I have a responsive navigation menu and when you open it on a smartphone or tablet, the original background of the website gets fixed to prevent the user from scrolling:
.cover-bg {
position: fixed;
}
But this also results to the scrolling bar to be hidden and the whole background moves to the left.
This is not wanted and really weird, how can I fix this?
Heres my website, open it on a smartphone and click on the menu.
(antonrave.de - Already fixed)
try this:
.cover-bg {
position: fixed;
left: 0;
right: 0;
}

make height 100% when toolbar hide in mobile browser

I have a div set to position:fixed which slide down upon clicking an <img>. When my fixed div appears it is in full screen for mobile browsers with full height. However, when I scroll, the mobile browser toolbar hides which causes my fixed div to not be full screen anymore (there is a gap at the bottom equivalent to the hidden toolbar's height).
Image of the toolbar :
I want to set this fixed div's height to 100% even when the mobile browser toolbar hides itself.
CSS
#slider{
display: none;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
height: 100%;
background: #fff;
overflow: scroll;
}
HTML
<body>
<div id="tick" class="col-md-12">many things</div>
<div id="slider" class="col-md-12">my slider</div>
</body>
I have solved the issue by using some css which stop hiding bottom toolbar on mobile browser.
when fixed div appear I add
$('body').css({'overflow':'hidden','position':'fixed'});
and when hide (remove) this div then again restore CSS
$('body').css({'overflow':'','position':''});
So when my fixed div appear it locked body and not even scroll. Also bottom toolbar of mobile browser never hide if user roughly scroll on fixed div. After that when div hide then body state restore again

How to make a responsive navigation menu remain at the top of a page?

I'm now working on a responsive navigation menu so that my page will be compatible with different platforms. I followed the steps here: http://www.w3schools.com/howto/howto_js_topnav.asp/ but I couldn't make it remain the same position when I shrank the window (I made the menu always remain at the top when my page is on a wide screen). how to make it remain at the top as every navigation bar is meant to?
You probably have to add positioning to your navigation bar:
position: fixed; /* if you want it to stay there even when scrolling */
position: absolute; /* if you just want it at the top of the page, but not at the top of your browser window */
top: 0;
left: 0;
right: 0;

Object stays in screen all time (DIV)

Ok so I want a specific div to stay in the corner of my html5 web page even when i scroll down.So it is just hanging in the corner so wgeb you scroll down the age it is still in the corner. Not in a fixed position, but stuck to your screen kind of. I want these divs to stay in the upper right corner even when I scroll it stays there.
<div style="font-size:50px; color:brown;" id="allCount">0</div>
<div style="font-size:30px; color:brown;" id="apsCount">0</div>
That's exactly what position: fixed is about.
#cornerItem {
position: fixed;
top: 0;
left: 0;
}
Try a little demo: http://jsfiddle.net/4zjym/ There is a gradient under the fixed element to show you, that you can actually scroll the content under the item.