在 bootstrap 和 body 的导航栏顶部添加一个图层以保持可滚动

Question

我有一个固定的导航栏，主体是可滚动的。我想在不影响滚动功能的情况下在导航栏顶部添加一个图层，但我的导航栏固定在顶部。我该如何解决这个问题。这是我的代码

<html lang="en">

<head>
    <meta charset="utf-8">
    <title> hot</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link href="css/styles.css" rel="stylesheet">

</head>

    <style>
    body{
        padding-top: 40px;
    }
    </style>

<body data-spy="scroll" data-target="#my-navbar">
  <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div><!-- Navbar Header-->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#feedback">Home</a>
                        <li><a href="#features">Our Services</a>
                    <li><a href="#gallery">Gallery</a>
                    <li><a href="#faq">Faq</a>
                    <li><a href="#contact">ContactUs</a>
                </ul>
            </div>
        </div><!-- End Container-->
    </nav><!-- End navbar -->

Answer 1

您可以将内容包装在 navbar-fixed-top class.

中

<html lang="en">
<head>
    <meta charset="utf-8">
    <title> hot</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet">
</head>

<style>
    body {
        padding-top: 90px;
    }

    .root {
        
        min-height: 100vh;
    }
</style>

<body data-spy="scroll" data-target="#my-navbar">
    <div class="navbar-fixed-top">
        <p>I am top of navbar</p>
        <!-- Navbar -->
        <nav class="navbar navbar-inverse" id="my-navbar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div><!-- Navbar Header-->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#feedback">Home</a>
                            <li><a href="#features">Our Services</a></li>
                            <li><a href="#gallery">Gallery</a></li>
                            <li><a href="#faq">Faq</a></li>
                            <li><a href="#contact">ContactUs</a></li>
                        </li>
                    </ul>
                </div>
            </div><!-- End Container-->
        </nav><!-- End navbar -->
    </div>
    
    <div class="root">
        <p>MY HEIGHT IS TOO LONG</p>
    </div>
</body>

在 bootstrap 和 body 的导航栏顶部添加一个图层以保持可滚动

adding a layer on top of navbar in bootsrap and the body to remain scrollable

html

css

twitter-bootstrap-3