1
ブートストラップ4を使用して、コンテナ内に固定のナビゲーションバーがあります。一番上はページ全体の幅ですが、スクロールを開始するとコンテナの中に入ります。スクロールダウン中にコンテナの中にナビバーを残す
私はそれを始めることができますか、または上にスクロールすると、コンテナの中に入ることができますか？
この部分はナビゲーションバースクロールを追加したので、スクロールすると色が変わり、背景色がアクティブな部分に変わります。
<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 -->
ここにCSSセクションがあります。
/* all */
body {
position: relative;
font-family: 'Slabo', serif;
font-size: 20px;
letter-spacing: 0.5px;
}
h3 {
font-family: 'Oswald', sans-serif;
font-size: 40px;
letter-spacing: 2px;
}
.container {
background-color: rgb(255, 255, 255);
}
.backgroundColor {
background-color: rgb(163, 167, 168);
}
.anchor {
position: relative;
top: -46px; /* this was added for navbar room after clicking on nav links */
}
/* navbar section */
.navbar {
background-color: white;
padding: 0;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav
.nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-
light .navbar-nav .show>.nav-link {
background-color: rgb(163, 167, 168);
color: white;
}
/* about section */
.one {
text-align: center;
border-bottom: 1px solid gray;
margin-top: 46px; /* added here or navbar will be over profile
picture MUST MATCH .ANCHOR */
}
.profpic {
border-radius: 50%;
margin-top: 30px;
margin: 30px auto 0px auto;
}
.description {
margin: 30px auto;
}
/* portfolio section */
.two {
text-align: center;
}
.titleport {
padding: 30px 0px;
margin: 0px;
}
p.secondPara {
margin-bottom: 30px;
}
.three {
border-bottom: 1px solid gray;
padding-bottom: 25px;
}
.img-section1, .img-section2, .img-section3, .img-section4 {
text-align: center;
}
img {
border-radius: 5%;
}
figure {
margin: 0px;
}
figcaption {
margin: 5px 0px;
}
/* contact section */
.titlecontact {
padding: 30px 0px;
text-align: center;
margin: 0px;
}
.contactme {
text-align: center;
font-style: italic;
margin: 0px;
}
a {
color: inherit;
transition: all 0.5s;
-webkit-transition: all.5s;
-moz-transition: all 0.5s;
}
a:hover {
color: rgb(1, 193, 213);
text-decoration: none;
}
.iconContainer {
text-align: center;
margin: 30px 0;
}
a.icons {
text-decoration: none;
margin: 10px;
}
ああ、簡単に修正できました... 0.0ありがとうございます！マージントップではなく、パディングトップでなければならない理由は分かりますか？ –
パディングはコンテンツと境界の間のスペースです。余白は境界の外側のスペースです。 マージンはボディーの背景色を表示させる 'div'を押し下げていました。これは白です。だからそれは一種の錯覚です。 'body background'を灰色の背景色に合わせて変更することもできます。 –