i using bootstrap 3, navbar-fixed-top class in particular. have 2 menus fix top jq shown below. see weird bug on short pages - when page height almost long page content: when try scroll, page flickers , forced top. happens hand scroll or using scroll wheel. result, can never see last copyright line. see video of this.
edited: when remove line $('nav').addclass('navbar-fixed-top'); issue goes away (but need line). how fix this?
also, when class navbar-fixed-top applied nav, scroll happens smoothly (hence, don't see bug on long pages). when it's not applied - bug comes back.
var navfixstart; var subfixstart; var xs = 480; var lg = 1200; var mobilestart = (992 - 15); if ($('body').hasclass('min')) { navfixstart = 40; subfixstart = 40; } else { navfixstart = 0; subfixstart = 160; } $(document).ready(function() { $(window).scroll(function() { if ($(window).width() < mobilestart) { // stuff } else { if ($(window).scrolltop() > navfixstart) { $('nav').addclass('navbar-fixed-top'); // problem line } else { $('nav').removeclass('navbar-fixed-top'); } } }); $(window).on('load resize', function() { if ($(window).width() < mobilestart) { //mobile stuff } else { $('nav').removeclass('navbar-inverse').removeclass('navbar-fixed-top'); $('nav>div').removeclass("container-fluid").addclass("container"); if ($(window).scrolltop() > navfixstart) { $('nav').addclass('navbar-fixed-top'); } else { $('nav').removeclass('navbar-fixed-top'); } } }); });/* nav */ nav { border: none !important; padding-top: 15px; z-index: 1000; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } nav div>ul>li>a:link { padding: 20px; } nav.navbar-fixed-top { background-color: rgba(244, 242, 239, 0.95); } nav.navbar-fixed-top.shad-bottom, .subnav { box-shadow: 0 3px 5px rgba(0, 0, 0, .1); } .navbar-brand { width: 145px; margin-left: 15px; margin-top: -5px; } .navbar-fixed-top .navbar-brand { width: 115px; } .navbar-fixed-top { margin-top: 0 !important; padding-top: 0 !important; } .navbar-fixed-top .navbar-brand>img { height: auto; } .navbar-fixed-top .navbar-brand { margin-top: 5px; } .navbar-toggle { padding: 9px; } .navbar-toggle .icon-bar { width: 20px; } nav .dropdown .dropdown-menu { border: 0; } nav .dropdown .dropdown-menu a:link { line-height: 32px; } nav .navbar-collapse { padding: 0; } nav .navbar-collapse.collapsing, nav .navbar-collapse.in { padding-right: 15px; padding-left: 15px; } .navbar-collapse .nav { position: relative; top: -7px; } .navbar-fixed-top .navbar-collapse .nav { position: static; } .navbar-nav>li>.dropdown-menu { margin-top: 7px; } .navbar-fixed-top .navbar-nav>li>.dropdown-menu { margin-top: inherit; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body class="top" ontouchstart=""> <nav class="navbar navbar-default shad-bottom"> <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> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">option</a> <ul class="dropdown-menu"> <li><a href="">option</a> </li> <li><a href="">option</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">option</a> <ul class="dropdown-menu"> <li><a href="">option</a> </li> <li><a href="">option</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">option</a> <ul class="dropdown-menu"> <li><a href="">option</a> </li> <li><a href="">option</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">option</a> <ul class="dropdown-menu"> <li><a href="">option</a> </li> <li><a href="">option</a> </li> <li><a href="">option</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">option</a> <ul class="dropdown-menu"> <li><a href="">option</a> </li> <li><a href="">option</a> </li> <li><a href="">option</a> </li> <li><a href="">option</a> </li> </ul> </li> <li><a href="">support</a> </li> </ul> </div> </div> </nav> <div class="container-fluid intro"> <div class="container"> <div class="row"> <div class="no-pad"> <h1><a href="">support</a></h1> </div> </div> <!-- end row --> </div> <!-- end container --> </div> <!-- end container-fluid --> <div class="container-fluid block"> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-8"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. cras aliquet blandit lectus, quis auctor ante posuere sit amet. fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. cras sed euismod ligula. sed id nulla elit. aenean dapibus condimentum ex nec fermentum. aliquam accumsan velit in dui sagittis cursus. vestibulum id scelerisque risus, @ efficitur turpis. <p> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- end container --> </div> <!-- end container-fluid --> <div class="container-fluid block block-dark"> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-8"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. cras aliquet blandit lectus, quis auctor ante posuere sit amet. fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. cras sed euismod ligula. sed id nulla elit. aenean dapibus condimentum ex nec fermentum. aliquam accumsan velit in dui sagittis cursus. vestibulum id scelerisque risus, @ efficitur turpis. <p> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- end container --> </div> <!-- end container-fluid --> <div class="container-fluid footer"> <div class="container no-pad"> <footer class="row"> <div class="col-sm-12 text-center visible-xs" style="background-color:#45555f;"> <div class="to-top"><a href="#"><span class="glyphicon glyphicon-chevron-up"></span>back top</a> </div> </div> <!-- end col --> <div class="col-sm-12 text-center visible-xs"> <div class="pad-bottom-md pad-top-sm"><a href="#">products</a> | <a href="#">services</a> | <a href="#">news</a> | <a href="#">jobs</a> | <a href="#">company</a> </div> </div> <!-- end col --> <div class="col-sm-4"> <h6>company name</h6> <address> address 1<br> address 2<br> address 3<br> <span>555-555-5555</span> </address> </div> <div class="col-sm-4"></div> <div class="col-sm-4 pad-bottom-md"> <h6>connect</h6> <div class="social"> <a href="" class="twitter"><span class="mu-icon-twitter"></span></a> <a href="" class="linkedin"><span class="mu-icon-linkedin2"></span></a> <a href="" class="youtube"><span class="mu-icon-youtube"></span></a> </div> <!-- end social --> </div> <div class="col-sm-12 pad-bottom-md"> <div class="copy">© 2016 company name, llc. <span style="white-space:nowrap;"><a href="privacy.html">privacy</a> | <a href="terms.html">terms</a> | <a href="disclaimer.html">disclaimer</a></span> </div> </div> </footer> </div> <!-- end container --> </div> <!-- end container-fluid --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> window.jquery || document.write('<script src="js/vendor/jquery.min.js"><\/script>') </script> <script src="js/bootstrap.min.js"></script> <script src="js/script-prototype-only.js"></script> </body> </html>js
$(window).scroll(function () { if ($(window).width() < mobilestart) { $('.subnav').removeclass('navbar-fixed-top'); } else { if ($(window).scrolltop() > navfixstart) { $('nav').addclass('navbar-fixed-top'); if ($(window).scrolltop() > subfixstart) { $('.subnav').addclass('navbar-fixed-top'); // bugger!!! } else if ($(window).scrolltop() <= subfixstart) { $('.subnav').removeclass('navbar-fixed-top'); } } else { // more stuff } } });
<div class="container-fluid block"> you have add padding-top div equal height of subnav element when subnav fixed.
for example if subnav has 50px height code may this:
$(window).scroll(function () { if ($(window).width() < mobilestart) { $('.subnav').removeclass('navbar-fixed-top'); } else { if ($(window).scrolltop() > navfixstart) { $('nav').addclass('navbar-fixed-top'); if ($(window).scrolltop() > subfixstart) { $('.subnav').addclass('navbar-fixed-top'); $('.container-fluid.block').css('padding-top', '50px'); } else if ($(window).scrolltop() <= subfixstart) { $('.subnav').removeclass('navbar-fixed-top'); $('.container-fluid.block').css('padding-top', '0'); } } else { // more stuff } } }); if block form has padding-top (for example 20px) have add 50px (so in javascript change 50px 70px , 0 20px)
