Html 向下滚动时，将导航栏保持在容器内
使用Bootstrap4，我在容器中有一个固定的导航栏。在顶部，它占据了整个页面的宽度，但当我开始滚动时，它进入了容器中 如何启动，或者当我滚动到顶部时，如何进入容器 这部分我添加了导航栏滚动，所以当我滚动时，它会改变颜色，并将背景颜色更改为活动部分Html 向下滚动时，将导航栏保持在容器内,html,css,Html,Css,使用Bootstrap4，我在容器中有一个固定的导航栏。在顶部，它占据了整个页面的宽度，但当我开始滚动时，它进入了容器中 如何启动，或者当我滚动到顶部时，如何进入容器 这部分我添加了导航栏滚动，所以当我滚动时，它会改变颜色，并将背景颜色更改为活动部分 <body data-spy="scroll" data-target="#navbarScroll"> <!-- nav section --> <div id="navbarScroll"> <na
<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 -->
解决方案： 将边距顶部更改为填充顶部 说明：
填充是内容和边框之间的空间。边距是边界外的空间。Margin将整个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 */
}
解决方案： 将边距顶部更改为填充顶部 说明：
填充是内容和边框之间的空间。边距是边界外的空间。Margin将整个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 */
}
哦，这是一个简单的解决办法。。。非常感谢！你知道为什么它必须是填充顶部，而不是边距顶部吗？填充是内容和边框之间的空间。边距是边界外的空间。边距将整个
div车身背景div车身背景