The other day, I encountered an unexpected problem with fixed positioning. After some searching, I came across a few articles on the topic (one of which is ) and it seems that there is no clear solution available.
In short, I am looking to have a fixed navigation bar and a sidebar as shown below (the code functions perfectly on desktop browsers like Chrome, Firefox, IE8), but I only want this behavior on desktop browsers. If a mobile device browser such as Android, iOS, or Windows Mobile is being used, I would like the fixed position for the nav and sidebar to be changed to static or relative, allowing these elements to scroll along with the rest of the page.
Solutions using media queries won't work as they target screen size rather than the actual device/browser being used.
Is it possible to achieve this? I would greatly appreciate a jsfiddle example to test it across different mobile devices. Thank you.
// JavaScript code here....header, .footer {
/* CSS styles here... */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header">
<div class="header-top">Header</div>
<div class="header-bottom"><nav>Sticky!</nav> </div>
</header>
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main</div>
</div>
<footer class="footer">Footer</footer>