个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 16:15:06 27 4
gpt4 key购买 nike

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

编辑:当我删除此行时 $('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
            }
        }
    });

最佳答案 

<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
        }
    }
});

如果你的表单 block 已经有填充顶部(例如 20px )你必须添加 50px到它(所以在 javascript 中将 50px 更改为 70px 并将 0 更改为 20px )

关于javascript - navbar-fixed-top - 页面闪烁，我被迫置顶，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37665301/

27 4 0
文章推荐： php - 在开发过程中保证资源重新加载(通过ajax)的好策略是什么？
文章推荐： c# - 如何在asp.net <%= %> 脚本中使用javascript作为参数
文章推荐： javascript - Jquery根据元素的父标签执行操作
文章推荐： javascript - MRAID 文件引用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com