Question

我特别使用Bootstrap 3，navbar-fixed-top类。我有两个菜单，我用JQ固定在顶部，如下所示。我只在短页面上看到一个奇怪的错误 - 只有当页面高度几乎与页面内容一样长时：当我尝试滚动时，页面闪烁，我被迫回到顶部。这种情况发生在手动滚动或使用滚轮。结果，我永远看不到最后的版权线。 See video of this

EDITED：当我删除此行$('nav').addClass('navbar-fixed-top');时，问题就会消失（但显然我需要该行）。我该如何解决这个问题？

此外，当类navbar-fixed-top应用于导航时，滚动顺利进行（因此，我看不到长页面上的错误）。当它没有应用时 - 错误会回来。

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 all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all 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, at 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, at 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 to 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">&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 {                                        
                // some more stuff
            }
        }
    });

Answer 1

<div class="container-fluid block">

当padding-top修复后，您必须将div添加到此subnav，等于subnav元素的高度。

例如，如果您的subnav高度为50px，则代码可能如下所示：

$(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 {
            // some more stuff
        }
    }
});

如果您的带有表单的块已经有填充顶部（例如20px），则必须向其添加50px（因此在javascript中将50px更改为70px并且0至20px）

navbar-fixed-top - 页面闪烁，我被迫顶尖

1 个答案: