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

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -