html - I want to prepare such type of navigation bar that have first relative position and then fixed position -
i know prepare navigation bar of fixed position , relative position separately how them @ 1 time means first header slides along navigation bar , navigation bar fixed @ position . w3schools website's navigation bar.
http://www.w3schools.com/html/default.asp
here fixed navbar
<!doctype html> <html> <head> <style> body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } li { float: left; } li { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #4caf50; } </style> </head> <body> <ul> <li><a class="active" href="#home">home</a></li> <li><a href="#news">news</a></li> <li><a href="#contact">contact</a></li> <li><a href="#about">about</a></li> </ul> <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;"> <h1>fixed top navigation bar</h1> <h2>scroll page see effect</h2> <h2>the navigation bar stay @ top of page while scrolling</h2> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> </div> </body> </html>here relative navbar
<!doctype html> <html> <head> <style> body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: relative; top: 0; width: 100%; } li { float: left; } li { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #4caf50; } </style> </head> <body> <ul> <li><a class="active" href="#home">home</a></li> <li><a href="#news">news</a></li> <li><a href="#contact">contact</a></li> <li><a href="#about">about</a></li> </ul> <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;"> <h1>fixed top navigation bar</h1> <h2>scroll page see effect</h2> <h2>the navigation bar stay @ top of page while scrolling</h2> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> <p>some text text text text..</p> </div> </body> </html>how combine in w3schools website given in above link
here code fixed navigation bar
<head> <title>bootstrap case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="height:1500px"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">websitename</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">page 1</a></li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> </div> </nav> <div class="container"> <h3>fixed navbar</h3> <div class="row"> <div class="col-md-4"> <p>a fixed navigation bar stays visible in fixed position (top or bottom) independent of page scroll.</p> <p>a fixed navigation bar stays visible in fixed position (top or bottom) independent of page scroll.</p> </div> <div class="col-md-4"> <p>a fixed navigation bar stays visible in fixed position (top or bottom) independent of page scroll.</p> <p>a fixed navigation bar stays visible in fixed position (top or bottom) independent of page scroll.</p> </div> <div class="col-md-4"> <p>a fixed navigation bar stays visible in fixed position (top or bottom) independent of page scroll.</p> <p>a fixed navigation bar stays visible in fixed position (top or bottom) independent of page scroll.</p> </div> </div> </div> <h1>scroll page see effect</h1> 
Comments
Post a Comment