Question

使用bootstrap 4，我在容器内部有一个固定的导航栏。在顶部，它占据页面的整个宽度，但是当我开始滚动时，它进入容器内。

如何启动或滚动到顶部，在容器内？

这部分我添加了导航栏滚动，所以当我滚动时，它会改变颜色并将背景颜色更改为活动部分。

#forced_container {


 .body{ 
       /* user evil invasive style/script */ 
  }
  #description:parent {
       font-weight: bold;
       text-decoration: none;
     }
 }

这是CSS部分。

<body data-spy="scroll" data-target="#navbarScroll">
<!-- nav section -->
<div id="navbarScroll">
  <nav class="navbar container fixed-top navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#"></a><!-- took off brand name on left; only toggler -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navi" aria-controls="navi" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navi">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      <ul>
    </div>
  </nav>
</div>

<!-- about section -->
<div class="backgroundColor">
  <div class="anchor" id="about"></div>
  <div class="container">
    <div class="row one">
      <div class="col-md-12">
        <img src="http://res.cloudinary.com/lyoon/image/upload/c_scale,h_350,w_350/v1503457656/02_27_16_2_u3qrdf.jpg" class="img-fluid profpic" alt="caught a bass!">
      </div>
      <div class="description col-md-8">
        <p>Front-End Developer and UX/UI Designer, with experience in HTML, CSS, and JavaScript. Familiar with Bootstrap for CSS, jQuery for JavaScript and responsive web design.</p><hr>
        <p>Junior Web Developer who loves programming, music, and walks</p>
      </div>
    </div>

    <!-- portfolio section -->
    <div class="anchor" id="portfolio"></div>
    <div class="row two">
      <div class="col-md-12">
        <h3 class="titleport">Portfolio</h3>
      </div>
      <div class="col-md-12">
        <p class="secondPara">To view demo, click image. To view code, click app title below image
          <br />
          All made with HTML, CSS, JavaScript
        </p>
      </div>
    </div>
    <div class="row three">
      <div class="col-md-6 img-section1">
        <figure>
          <a href="https://lawrenceyoon.github.io/Score_Keeper/">
            <img src="http://res.cloudinary.com/lyoon/image/upload/c_scale,h_400,w_500/v1509214906/Screen_Shot_2017-10-28_at_11.21.21_AM_w2ieuq.png" class="img-fluid" alt="Score Keeper Game">
          </a>
          <figcaption><a href="https://github.com/lawrenceyoon/Score_Keeper">Score Keeper</a></figcaption>
        </figure>
      </div>
      <div class="col-md-6 img-section2">
        <figure>
          <a href="https://lawrenceyoon.github.io/Color_Game/">
            <img src="http://res.cloudinary.com/lyoon/image/upload/c_scale,h_400,w_500/v1509390097/Screen_Shot_2017-10-30_at_12.01.08_PM_fnjwbi.png" class="img-fluid" alt="Color Game">
          </a>
          <figcaption><a href="https://github.com/lawrenceyoon/Color_Game">Color Game</a></figcaption>
        </figure>
      </div>
      <div class="col-md-6 img-section3">
        <figure>
          <img src="http://res.cloudinary.com/lyoon/image/upload/c_scale,h_400,w_500/v1503458438/01_19_16_2_y3l4th.jpg" class="img-fluid" alt="3rd beach pic">
          <figcaption>Replace pic later3</figcaption>
        </figure>
      </div>
      <div class="col-md-6 img-section4">
        <figure>
          <img src="http://res.cloudinary.com/lyoon/image/upload/c_scale,h_400,w_500/v1503458438/01_19_16_2_y3l4th.jpg" class="img-fluid" alt="4th beach pic">
          <figcaption>Replace pic later4</figcaption>
        </figure>
      </div>
    </div>

    <!-- contact section -->
    <div class="anchor" id="contact"></div>
    <div class="row four">
      <div class="col-md-12">
        <h3 class="titlecontact">Contact</h3>
      </div>
      <div class="col-md-12">
        <p class="contactme">Please send me an email if you want to contact me!</p>
      </div>
    </div>
  </div><!-- end of container -->
</div><!-- end backgroundColor -->

Answer 1

<强>解决方案：

将margin-top更改为padding-top。

<强>解释：

填充是内容和边框之间的空间。保证金是边界以外的空间。保证金推动整个div下降，导致身体背景颜色显示，恰好是白色。所以这是一种视错觉。

您还可以更改正文背景以匹配灰色背景颜色。

.one {
    text-align: center;
    border-bottom: 1px solid gray;
    padding-top: 46px; /* added here or navbar will be over profile 
    picture MUST MATCH .ANCHOR */
}

向下滚动时将导航栏保持在容器内

1 个答案: