<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Фиксирование навигации Affix Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/assets/css/bootstrap.css" rel="stylesheet" /> <script src="/assets/js/jquery-1.10.2.js"></script> <script src="/assets/js/bootstrap.min.js"></script> <style> ul.nav-tabs{ width: 180px; margin-top: 20px; border: 1px solid #999; border-radius: 4px; } ul.nav-tabs li{ margin: 0; border-top: 1px solid #999; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; color: #000; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #000; background: #eee; border: 1px solid #999; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; } </style> </head> <body data-spy="scroll"> <div class="container"> <div class="row text-center"> <div class="col-md-12" data-target="#myScrollspy"> <h1>Фиксирование навигации Affix Bootstrap 3</h1> <div class="col-md-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" id="myNav"> <li class="active"><a href="#nav-tabs-1">Картинка 1</a></li> <li><a href="#nav-tabs-2">Картинка 2</a></li> <li><a href="#nav-tabs-3">Картинка 3</a></li> <li><a href="#nav-tabs-4">Картинка 4</a></li> <li><a href="#nav-tabs-5">Картинка 5</a></li> </ul> </div> <div class="col-md-9"> <h3 id="nav-tabs-1">Картинка Affix 1</a> <img src="/design/scroll-effect/2015/affix-bootstrap/affix-bootstrap-3.jpg" alt="Affix - Bootstrap 3" class="img-responsive center-block"/> <h3 id="nav-tabs-2">Картинка Affix 2</a> <img src="/design/scroll-effect/2015/affix-bootstrap/affix-bootstrap-3.jpg" alt="Affix - Bootstrap 3" class="img-responsive center-block"/> <h3 id="nav-tabs-3">Картинка Affix 3</a> <img src="/design/scroll-effect/2015/affix-bootstrap/affix-bootstrap-3.jpg" alt="Affix - Bootstrap 3" class="img-responsive center-block"/> <h3 id="nav-tabs-4">Картинка Affix 4</a> <img src="/design/scroll-effect/2015/affix-bootstrap/affix-bootstrap-3.jpg" alt="Affix - Bootstrap 3" class="img-responsive center-block"/> <h3 id="nav-tabs-5">Картинка Affix 5</a> <img src="/design/scroll-effect/2015/affix-bootstrap/affix-bootstrap-3.jpg" alt="Affix - Bootstrap 3" class="img-responsive center-block"/> </div> <script> $(document).ready(function(){ $("#myNav").affix({ offset: { top: 100 } }); }); </script> </div> </div> </div> </body> </html>