代码之家  ›  专栏  ›  技术社区  ›  jsPlayer

导航条上的Bootstrap 4 sticky top class不工作

bootstrap-4 twitter-bootstrap css html
  •  3
  • jsPlayer  · 技术社区  · 6 年前

    也许我的一些其他类正在与粘性的顶级引导类相混淆。我以为这和把类添加到导航栏一样简单。我有两个导航条,不允许使用固定顶部的一些内部原因。我希望我的第二个导航条是粘到顶部,而我滚动下来。我做错什么了?这是我的密码 

    /* .text-spLeft {
    margin-left: 5px;
  }
  
  .text-spRight {
    margin-right: 5px;
  }
  
  .header-secondnav .fixed-top {
    margin-top: 70px !important;
  }
  
  .header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
    border-bottom: 5px;
    border-bottom-color: grey;
    border-bottom-style: solid;
    border-bottom-width: thin;
  }
  .header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
    margin-bottom: 15px;
  }
  .header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
    display: none;
  }
  .header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
    outline: 0 !important;
  }
  .header-firstnav .nav-link, .header-secondnav .nav-link {
    color: black;
    font-weight: bold;
  }
  .header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
    color: #eb1b1e;
    font-weight: bold;
  } */

  .text-spLeft {
    margin-left: 5px;
}

.text-spRight {
    margin-right: 5px;
}

  
  .header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
    border-bottom: 5px;
    border-bottom-color: grey;
    border-bottom-style: solid;
    border-bottom-width: thin; }
  
  .header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
    margin-bottom: 15px; }
  
  .header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
    display: none; }
  
  .header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
    outline: 0 !important; }
  
  .header-firstnav .nav-link, .header-secondnav .nav-link {
    color: black;
    font-weight: bold; }
  
  .header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
    color: #eb1b1e;
    font-weight: bold; }
  
  .text-spLeft {
    margin-left: 5px; }
  
  .text-spRight {
    margin-right: 5px; }
  
  
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="./header.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">

</head>

<body>
    <div class="main">
        <div class="header-firstnav">
            <nav class="navbar sticky-top navbar-expand-lg">
                <a class="navbar-brand" href="#">
                    <img src="./images/dnowlogo.png" alt="image goes here" class="img-responsive">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">



                    <ul class="navbar-nav  d-flex justify-content-between w-100 top-nav-ul ">
                        <li class="nav-item ">
                            <form class="form-inline my-2 my-lg-0">
                                <div class="input-group">
                                    <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
                                    <span class="input-group-append">
                                        <div class="input-group-text bg-white">
                                            <i class="fa fa-search"></i>
                                        </div>
                                    </span>
                                </div>
                            </form>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link " href="#">Shop Online</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link " href="#">Investor</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link " href="#">Careers</a>
                        </li>

                        <li class="nav-item dropdown ">
                            <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                United States
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>

                            </a>
                            <!-- <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        United States
                                        <i class="fa fa-heart"></i>
                                      </button> -->
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Australia</a>
                                <a class="dropdown-item" href="#">Canada</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">India</a>
                            </div>
                        </li>
                    </ul>


                </div>
            </nav>
        </div>

        <div class="header-secondnav">
            <nav class="navbar sticky-top navbar-expand-lg">
                <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button> -->

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <ul class="navbar-nav  justify-content-lg-between w-100 d-lg-flex"> -->
                    <!-- <li class="nav-item active">
                                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li> -->
                    <ul class="navbar-nav  d-flex justify-content-between w-100">
                        <li class="nav-item dropdown">
                            <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Products and Services
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>

                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown ">
                            <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Solutions
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>

                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown ">
                            <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Industries
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>

                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown ">
                            <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                About Us
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>

                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown ">
                            <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Resources Center
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>

                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link " href="#">Location</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link " href="#">Contact Us</a>
                        </li>
                    </ul>

                </div>
            </nav>
        </div>

    </div>

    <div style="height: 2000px;">

     

    </div>















    <!-- Footer -->
    <footer class="page-footer font-small mdb-color lighten-3 pt-4">

        <!-- Footer Links -->
        <div class="container text-center text-md-left">

            <!-- Grid row -->
            <div class="row">

                <!-- Grid column -->
                <div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1">

                    <!-- Content -->
                    <h5 class="font-weight-bold text-uppercase mb-4">Footer Content</h5>
                    <p>Here you can use rows and columns here to organize your footer content.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet numquam iure provident voluptate
                        esse quasi, veritatis totam voluptas nostrum.</p>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">

                    <!-- Links -->
                    <h5 class="font-weight-bold text-uppercase mb-4">About</h5>

                    <ul class="list-unstyled">
                        <li>
                            <p>
                                <a href="#!">PROJECTS</a>
                            </p>
                        </li>
                        <li>
                            <p>
                                <a href="#!">ABOUT US</a>
                            </p>
                        </li>
                        <li>
                            <p>
                                <a href="#!">BLOG</a>
                            </p>
                        </li>
                        <li>
                            <p>
                                <a href="#!">AWARDS</a>
                            </p>
                        </li>
                    </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">

                    <!-- Contact details -->
                    <h5 class="font-weight-bold text-uppercase mb-4">Address</h5>

                    <ul class="list-unstyled">
                        <li>
                            <p>
                                <i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
                        </li>
                        <li>
                            <p>
                                <i class="fa fa-envelope mr-3"></i> info@example.com</p>
                        </li>
                        <li>
                            <p>
                                <i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
                        </li>
                        <li>
                            <p>
                                <i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
                        </li>
                    </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 text-center mx-auto my-4">

                    <!-- Social buttons -->
                    <h5 class="font-weight-bold text-uppercase mb-4">Follow Us</h5>

                    <!-- Facebook -->
                    <a type="button" class="btn-floating btn-fb">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <!-- Twitter -->
                    <a type="button" class="btn-floating btn-tw">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <!-- Google +-->
                    <a type="button" class="btn-floating btn-gplus">
                        <i class="fa fa-google-plus"></i>
                    </a>
                    <!-- Dribbble -->
                    <a type="button" class="btn-floating btn-dribbble">
                        <i class="fa fa-dribbble"></i>
                    </a>

                </div>
                <!-- Grid column -->

            </div>
            <!-- Grid row -->

        </div>
        <!-- Footer Links -->

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3">© 2018 Copyright:
            <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
        </div>
        <!-- Copyright -->

    </footer>
    <!-- Footer -->
    1 回复  |  直到 6 年前
        1
  •  7
  •   Carol Skelly    5 年前

    它不起作用,因为父“主”容器没有任何显著的高度。如果你把2000像素高的div移到main,它就会工作,并且 sticky-top 应该用于“main”的直接子元素。

    演示: https://codeply.com/go/5aDkGY8KjI 

    <div class="main">
    <div class="header-firstnav">
        <nav class="navbar navbar-expand-lg">
             ...
        </nav>
    </div>

    <div class="header-secondnav sticky-top">
        <nav class="navbar navbar-expand-lg">
             ...
        </nav>
    </div>

    <div>content with height...</div>
</div>
<footer></footer>

    How to place navbar below sticky navbar using bootstrap 4?

        2
  •  0
  •   diego sanches    5 年前

    还要检查的一件事是,是否有任何父元素设置了以下css属性之一:

    溢出 溢出-y 溢出-x 如果将此属性设置为其中一个值,则它将不起作用:自动、隐藏、覆盖、滚动。

    最好的解决方案是删除它或将其值更改为“unset” enter image description here

    推荐文章
    xajetin  ·  导航不更改滚动上的颜色
    2 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    2 年前
    Bryan Santos  ·  固定表头与引导
    2 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    2 年前
    tym  ·  根据用户偏好显示字段
    2 年前
    Sheryar Khan  ·  如何仅使用html、css、bootstrap、javascript/jquery创建html页面?
    2 年前
    Pavel  ·  当验证DIV可见时,引导网格会移动
    6 年前
    Sam  ·  在标题中嵌入Bootstrap 3导航栏
    6 年前
    Alexander David  ·  折叠卡打开,然后立即再次关闭
    6 年前
    Sandeep Bhardwaj  ·  div的一致行为,与设备分辨率无关
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号