在引导程序和正文的导航栏顶部添加一个图层以保持可滚动答案

【问题标题】：adding a layer on top of navbar in bootsrap and the body to remain scrollable在引导程序和正文的导航栏顶部添加一个图层以保持可滚动
【发布时间】：2020-04-25 17:58:40
【问题描述】：

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

<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 -->

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以将您的内容包装在navbar-fixed-top 类中。

<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>

【讨论】：

如果你喜欢我的回答或者你从我的回答中得到任何帮助，别忘了考虑投票