使用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 -->
答案 0 :(得分:0)
<强>解决方案:强>
将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 */
}