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).
Related
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
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;
}
I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}
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;
I need to put a div "propped" to the bottom of the windows browsers.
Like the one with chat on facebook. It must be positioned always at the bottom of the screen, also when I scroll the page.
Fixed? I know IE7 sucks on it...
How can I do it?
#yourdiv {
position: fixed; /* This will be always visible and positioned where you want */
bottom: 0; /* place it to the bottom */
z-index: 9999; /* You may want to be sure no other elements will be displayed on top of it, raise this if it's still being displayed under other elements */
}
http://jsfiddle.net/zQNcu/9/
Position:fixed is the way to go. This is the only way to have a div being displayed at the same position regardless of page scrolling. Otherwise, if this doesn't work (older browsers perhaps), you need JS to keep it at a specific position regardless of page scroll.
use the position: fixed; css property
#somediv {
position: fixed;
bottom: 0px;
}
*html #somediv {
position: absolute;
}