persistent nav below header for mobile (like iOS7 browser) - javascript

This issue is giving me a serious headache and delaying my project because I cannot figure it out.
I am trying to create a mobile friendly website and am performing the tests in iOS7/OSX.
Basically I have a header, a nav below it, and below that all the content. When the user scrolls down, I want the header to smoothly to dissapear, and then the nav bar will clip (fix) to the top of the browser. So far this seems to be possible with only CSS3, but it isn't perfect, and javascript makes the nav bar "snap" to the browser once the scrolling has stopped. Furthermore, I would like to make it so when I scroll up, it will show the header, regardless if im in the middle, top, or bottom of the page. This works just like the header and footer in the iOS Safari browser. When you scroll down everything slides away, but then when you scroll back up, the footer and header reveal themselves.
I need to accomplish this, preferably without JS, but that doesnt seem possible.
So, can someone PLEASE show me or link me to a tutorial that can show me how this is done and what it is I exactly need? I would greatly appreciate it. And keep in mind it must work smoothly on mobile browsers.

Using position: sticky for the nav could be close to what you are after. It is supported by Safari in ios7 at least (demo). Try adding something like this to your nav:
.nav {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 15px;
}
For more complex behaviour, like the header appearing again when you are scrolling up, you will probably need to resort to javascript.

Related

Site doesn't hide address bar when scroll down in mobile browsers on Android

I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?
Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)

Scrollbar not visible for certain users

We have a web app which has a fixed side bar used for navigation. The app is built of this template
We are facing a very strange problem where the scroll bar disappears from the html and the page gets cut off. The interesting thing is the scrollbar shows up for 99% of our users but not for the remaining 1%.
We tried everything we could think of including setting the body and html to 100% height and automatic overflow, we also asked those 1% of our users to disable all their browser extensions, clear their cache but nothing helped.
Those 1% still have scrolling issues and their pages are cut off.
What can cause a scrollbar to disappear for some users but not others?
Without actually seeing the page, the only thing I can think of is making sure the scrollbar always shows with overflow content like so.
html {
overflow-y: scroll;
}
Some additional research shows that sometimes Firefox doesn't play nice, so you can try this if that's the case.
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
Source: https://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/

Why is my nav-pill on the top of my screen in IE & Edge but it looks fine in chrome?

I am making a simple web page, but on google chrome it looks perfectly fine, just how I want, but when I open the page in IE or Edge the nav-pill tabs are at the top of the screen instead of near the middle like they are in chrome.
Images:
I have the 'top' property of the div that they are in is set to 30%.
I have a lot more code, but I don't want to flood this with it, If you need more info let me know! Thanks in advance!
#bodyArea
{
width: 425px;
position: relative;
top: 30%;
left: 44.3%;
}
After testing the code you showed us i noticed as well that it didn't work in IE. From here i would conclude the percentage from top for position:relative is incompatible with IE (judging from this: https://msdn.microsoft.com/en-us/library/ms531177(v=vs.85).aspx IE takes a percentage of the parent container and it might not know the height of the container of your div). I am afraid i can't be of more help without knowing more of the code around your div.

Why is my nav bar with 'position:fixed' displaying at bottom of web page not bottom of viewport on mobile?

I have a navigation bar which has its position set to fixed. This works fine as expected on browesrs and on mobile browsers as expected. The navigation bar is positioned at the botton of the viewport and everything else scrolls under it.
But then same page when moved to a mobile web view in an app, it render the navigation bar at the very end of the page so that I have to scroll down to see it.
I comes on the device view only when I change the top position to around 50%.
It also seems that if I remove everything from that page with only empty , I still see vertical scroll bar even though my page is empty.
Using position: fixed on mobile devices has several known issues. Among them is the behavior of the fixed element, which doesn't always stay fixed.
Although your problem may be in your code, that may not be the problem since you mention that your nav bar is working well across various mobile browsers.
Here's a review of position: fixed tested across multiple mobile platforms and devices:
Fixed Positioning in Mobile Browsers
Here's an answer I provided to a related question a few days ago:
Enable mobile device users to toggle div between position: fixed and position: static (or 'relative')
Hope this helps. Good luck!

Single finger scroll in Safari not rendering html until scroll finishes

In a mobile web application I have a div which can be scrolled with the new fancy -webkit-overflow-scrolling: touch. The only problem is that the content is being rendered only when the scrolling finishes. Is there a way to make Mobile Safari (and maybe other mobile browsers, like that one in Android) render the html during single finger scroll?
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
You can work around this by using hardware acceleration. Try adding the following CSS to elements inside .layer-content:
-webkit-transform: translate3d(0,0,0);
Not really. That is just the way the iPhone works. If you scroll, all resources are used to make the scrolling very smooth, at the expense of not showing the new parts. You could maybe fool the browser into thinking the layer is bigger, by making it bigger, and add a layer on top of the part you don't want to show, but this doesn't work for all layouts. I would just leave it be. Users are used to it, as normal pages have the same 'rendering issue'.
The position: absolute is messing with the rendering. The Mobile Safari will not render elements that does not have the standard value for positioning, until the scrolling have come to a halt.
If the position is auto (the default value), Mobile Safari will render the element as you scroll.
I'm pretty darn sure I just solved this with:
overflow-y: auto;
Add that to your scrolling element.
(Presumably just overflow: auto; would work too depending on your needs.)

Categories