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
Post a Comment