arrays - How to implement a sticky header on mobile devices -


i know how implement sticky header on pc browser. however, on mobile devices, 'scroll' event behaves weired. fires once after window stopped scrolling, cannot monitor 'window.scrolltop' in real time.

i tried 'position:sticky', supported on ios8 , above.

so right way create sticky header on mobile browsers? ideas appreciate, thank you~

you can use framework bootstrap achieve that. here code snippet same.

 <nav class="navbar navbar-default navbar-fixed-top">       <div class="container">         <div class="navbar-header">           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">             <span class="sr-only">toggle navigation</span>             <span class="icon-bar"></span>           </button>           <a class="navbar-brand" href="#">project name</a>         </div>         <div id="navbar" class="navbar-collapse collapse">           <ul class="nav navbar-nav">             <li class="active"><a href="#">home</a></li>             <li><a href="#about">about</a></li>             <li><a href="#contact">contact</a></li>           </ul>           <ul class="nav navbar-nav navbar-right">             <li><a href="../navbar/">default</a></li>             <li><a href="../navbar-static-top/">static top</a></li>             <li class="active"><a href="./">fixed top <span class="sr-only">(current)</span></a></li>           </ul>         </div><!--/.nav-collapse -->       </div>     </nav> 

Comments

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -