0

大家好，我下载了一个引导模板，并修复了导航栏静态顶部。我还减少了每个滚动部分的 padding-top。我遇到了麻烦，因为当我滚动到其他页面滚动时，它会覆盖页面部分的标题文本。我想让我的导航栏更大，但我不能，因为它覆盖了页面滚动。是否有任何解决方案可以减少向下滚动或将其定位在页眉的一个分区中不会被覆盖？这是代码：

body {
  width: 100%;
  height: 100%;
}
html {
  width: 100%;
  height: 100%;
}
@media(min-width:767px) {
  .navbar {
    text-align: right;
    padding: 30px 0;
  }
  .top-nav-collapse {
    padding: 0;
  }
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
    The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
    of those sections to manage the look and feel of the site. */

.intro-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  background: #fff;
}
.about-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  background: #eee;
}
.services-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  background: #fff;
}
.contact-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  background: #eee;
}
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

      <a class="navbar-brand"><span class="logo"><img class="logo-mob" width="10%" src="images/mylogo.png" alt="mylogo"></span> </a>

      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li class="hidden">
            <a class="page-scroll" href="#page-top"></a>
          </li>
          <li>
            <a class="page-scroll" href="#about">About</a>
          </li>
          <li>
            <a class="page-scroll" href="#services">Services</a>
          </li>
          <li>
            <a class="page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <!-- Intro Section -->
  <section id="intro" class="intro-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>Scrolling Nav</h1>
          <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class
            and set the link target to a corresponding ID on the page.</p>
          <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="about-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>About Section</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="services-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>Services Section</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="contact-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>Contact Section</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- jQuery -->
  <script src="js/jquery.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="js/bootstrap.min.js"></script>

  <!-- Scrolling Nav JavaScript -->
  <script src="js/jquery.easing.min.js"></script>
  <script src="js/scrolling-nav.js"></script>

</body>

4

0 回答 0