Question

我正在使用Bootstrap在页面顶部生成一个固定的导航栏。除了一个问题，一切都很好。滚动时，我的页面的某些部分与导航栏重叠。整个页面正文包含在div中。

以下是问题的图片。

HTML：

 <html>
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            <title>Saasapp</title>
            <%= csrf_meta_tags %>
            <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
            <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
            <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

            <script>
            $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip();   
            });
            </script>
        </head>
          <body>

        <div class="navbar" id="navbar">

              <%= link_to "/", class: "navbar-logo" do %>
              <%= image_tag 'MGE_logo.png', alt: 'a'%>
              <% end %>
          <a class="" href="javascript:void(0)"></a>
          <a class=""><%= link_to "How it Works", "#" %></a>
          <a class=""><%= link_to "Course Directory", "#" %></a>
          <a class=""><%= link_to "Find Event", "#" %></a>
          <a class=""><%= link_to "Course Owners, Claim your Course!", "#" %></a>
        </div>

          <div class= "container">
            <% flash.each do |type, msg| %>
              <%= content_tag :div, msg, class: "alert alert-#{type}" %>
            <% end %>
          </div>
        </nav> 


    <div class="content">
             <div class="maintop">
               <div class="maintopheader">     

               </div>
               <div class="maintopbody">
                  <table style="width:100%">
                    <tr>
                      <td><p>Get quotes from dozen of courses<br>Fast and easy with no obligation<br></p>
                      <%= link_to "Get Free Quotes Now »",new_quote_path, class: 'homebutton' %></a></td>
                       <td>
                      <p>Browse thousands of courses and find<br>the best course for your event<br></p>

                      <%= link_to "Search Courses Now »",new_quote_path, class: 'homebutton' %></td>
                      </tr>
                    </table>
                </div>
              </div>

          <div class="content container"></div>
              <div class="mainbottom">
                <div class="row">
                  <div class="col-md-3 mycol content">
                    <%= image_tag("browseicon.png", class: 'content') %>
                    <p>Browse Courses to Find<br>the Perfect Venue</p>
                  </div>
                  <div class="col-md-3 mycol">
                    <%= image_tag("formicon.png", class: '') %>
                    <p>Fill Out a Form<br>in 5 Minutes</p>
                  </div>
                  <div class="col-md-3 mycol">
                    <%= image_tag("bidicon.png", class: '') %>
                    <p>Course Bid to Host<br>Your Event</p>
                  </div>
                  <div class="col-md-3 mycol">
                    <%= image_tag("findicon.png", class: '') %>
                    <p>Get the Perfect Venue<br>at the Lowest Cost</p>
                  </div>
                </div>
                <a class="homebutton greenbutton" href="#" role="button">Learn More »</a></td>
                <br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
              </div>
             </div>
          </div>

CSS：

body,h1,h2,h3 {
    font-family: 'Open Sans', sans-serif;
}


a.navbar-logo img {
    height: 48px;
    width: 150px;
    margin-bottom: 0px;
    margin-top: 0px;
}

#navbar .navbar-logo {
    padding-top: 0px;
   margin-bottom: 0px;
}
#navbar.navbar {
  margin-bottom: 0px;
}

.nav-link-custom {
    margin-top: 40px;
    padding-bottom: -20px;
}
.navbar-right-custom { 
    color: #F47D00;
    padding-bottom: -20px;
    margin-top: 20px;
    float: right;
    font-size: 18px;
    vertical-align: middle;
    font-weight: bold;

}

.nav-bar-right-custom {
    color: #F47D00;
    float: right;
    vertical-align: top;
}

.navbar-container-bottom {
    height: 90px;
    margin-top: -8px;

}

.navbar-container-top {
    height: 50px;
    margin-top: -5px;
}

.footer-containter {
    padding-top: 30px;

}

.maintop {
    margin-top: 0px;
    height: 400px;
    background-image:url('/assets/home_background_image.jpg');
    width: 100%;
    background-color: black; /* fallback color */
    background-position: center;
    background-size: cover;
    color: rgb(255,255,255); /*white*/
}

.maintopheader {
    font-weight: 700;
    font-size: 60px;
    text-align: center;
    text-shadow: 1px 1px #000000;
    padding-top: 50px;

}    

.maintopbody {
    width: 100%;
    text-align: center;
    vertical-align: bottom;
    padding-top: 60px;
    font-size: 22px;
    font-weight: 500;
}

.jumbocol {
    color: rgb(255,255,255);
    font-size: 26px;
    text-align: center;
}

.homebutton {
    background-color: #F47D00; /* Orange */
    color: rgb(255,255,255);
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    border-radius: 2px;
    text-decoration: none;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    text-shadow: 0px 0px #000000;
    &:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);
        text-decoration: none;
        background-color: rgb(255,255,255); /* White */
        color: #F47D00;
    }
}


.greenbutton {
    background-color: #469F3B; /* Green */
    color: rgb(255,255,255);
    margin:auto;
    display:block;
    &:hover {
        background-color: rgb(105,105,105); /* White */
        color: rgb(255,255,255);
        text-decoration: none;
    }
}

.nobold label {
    font-weight: normal;
}
.formbutton {
    // background-color: #469F3B; /* Green */
    // color: rgb(255,255,255);
    opacity: 0.0;

}
.mycol {
    color: rgb(105,105,105); /*dark grey*/
    font-weight: Bold;
    font-size: 40;
    text-align: center;
    vertical-align: middle;
}

/* Tooltip */
.Customtooltip + .tooltip > .tooltip-inner {
    background-color: rgba(70,159,59,0.2); /* Green */
    color: rgba(0,0,0,1.0);
    border: 1px solid green;
    padding: 15px;
    font-size: 14px;
}

/* Tooltip on top */
.Customtooltip + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.Customtooltip + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid green;
}

/* Tooltip on left */
.Customtooltip + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid green;
}

/* Tooltip on right */
.Customtooltip + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid green;
}
#navbar {
  overflow: hidden;
  background-color: #A9A9A9;
  margin-bottom: 0px;
}

#navbar a {
  float: left;
  display: block;
  color: #303030;
  text-align: center;
  padding-top: 20px;
  padding-left: 16px;
  padding-right: 16px;
  text-decoration: none;
  font-size: 17px;
  height: 50px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.stickycontent {
  padding-top: 100px;
}

body 

{ padding-top: 10px;  background-color: ghostwhite;}

Answer 1

首先，你的代码破坏了很多错误。

您可以通过向z-index添加更多nav来解决问题。

喜欢这个

#navbar {
  z-index: 9999;
}

滚动时某些内容与导航栏重叠

1 个答案: