Sample for this topic on FCC https://forum.freecodecamp.org/t/navbar-change-position/225420
A Pen by Pedro Braga on CodePen.
<div class="hero-image"> | |
<!-- <img src="https://images2.imgbox.com/24/1c/FsJ4AwKi_o.jpg" alt=""> --> | |
<div class="portfolio"> | |
<h2 class="portfolio-title"><span class="portfolio-title--small">Hi there, I'm</span> Esther Itolima | |
<hr> | |
</h2> | |
<p class="portfolio-intro">A frontend web developer with great passion for tech and fascinated <br> to solve real world problem with software.</p> | |
</div> | |
<nav id="navbar" class="not-fixed"> | |
<ul> | |
<li><a href="#follow-me">Follow me</a></li> | |
<li><a href="#contact-me">Contact me</a></li> | |
<li><a href="#concepts">Concepts</a></li> | |
<li><a href="#about-me">About Me</a></li> | |
</ul> | |
</nav> | |
</div> | |
<section id="about-section"> | |
<h1 class="about-title" id="about-me">A LITTLE BIT ABOUT ME | |
<hr> | |
</h1> | |
<p class="about-intro">My name is Andrew, I am from Kharkiv, Ukraine. And I'm a beginner full stack web developer, currently I have some <br>experience with HTML&Bootstrap, CSS&LESS, JS&Jquery, NodeJS&PHP. Now I practice in the development<br> of web applications, and some | |
frameworks like Angular, React etc. I want to learn more and utilize my skills in<br> the field of Information Technology and to help solve real world challenges. I use: Git, Gulp, <br> Bower, Npm, PhpStorm,Photoshop and Google). | |
</p> | |
</section> | |
<section id="concept-works"> | |
<h1 class="section-title" id="concepts">CONCEPTS | |
<hr> | |
</h1> | |
<div class="concept-pages"> | |
<div class="concept creek-masonry-750 col-1 gutter"> | |
<div class="post-1533 type-concept status-publish has-post-thumbnail hentry concept-tag-media concept-item"> | |
<a href="https://itolimaesther.github.io/Google-search-page/" class="thumb"> | |
<img width="750" height="500" src="https://res.cloudinary.com/esther/image/upload/v1536515961/google-search-page.png" class="attachment-creek-masonry-750 wp-post-image" alt="1" /> | |
<div class="concept-hover"> | |
<div class="concept-description"> | |
<h4>Google Search Page</h4> | |
<div><p>It displays a Google search page that was built by me from scratch during practice of skills …</p> | |
</div> | |
</div> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="concept creek-masonry-750 col-2 gutter"> | |
<div class="post-1533 type-concept status-publish has-post-thumbnail hentry concept-tag-media concept-item"> | |
<a href="https://itolimaesther.github.io/Pixel-art-maker/" class="thumb"> | |
<img width="750" height="500" src="https://res.cloudinary.com/esther/image/upload/v1536515962/pixel-maker.png" class="attachment-creek-masonry-750 wp-post-image" alt="1" /> | |
<div class="concept-hover"> | |
<div class="concept-description"> | |
<h4>Pixel Maker</h4> | |
<div><p>Pixel maker that allows you to create any pixel by choosing the number of grid, color, submit and | |
click the box to create whatever pixel shape you desire …</p> | |
</div> | |
</div> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="concept creek-masonry-750 col-3 gutter"> | |
<div class="post-1533 type-concept status-publish has-post-thumbnail hentry concept-tag-media concept-item"> | |
<a href=" https://itolimaesther.github.io/JavaScript-Documentation/" class="thumb"> | |
<img width="750" height="500" src="https://res.cloudinary.com/esther/image/upload/v1536515999/javascript-documentation.png" class="attachment-creek-masonry-750 wp-post-image" alt="1" /> | |
<div class="concept-hover"> | |
<div class="concept-description"> | |
<h4>JavaScript Documentation</h4> | |
<div><p>It displays javascript documentation …</p> | |
</div> | |
</div> | |
</div> | |
</a> | |
</div> | |
</div> | |
</div> | |
<!-- <div class="concepts-pages"> | |
<div class="concepts-pages_google-search"> | |
<img src="https://res.cloudinary.com/esther/image/upload/v1536515961/google-search-page.png" alt="google-search-page"> | |
</div> | |
<div class="concepts-pages_js-doc"> | |
<img src="https://res.cloudinary.com/esther/image/upload/v1536515999/javascript-documentation.png" alt="javascript-documentation"> | |
</div> | |
<div class="concepts-pages_pixel"> | |
<img src="https://res.cloudinary.com/esther/image/upload/v1536515962/pixel-maker.png" alt="pixel-maker"> | |
</div> | |
</div> --> | |
</section> | |
<section id="follow-section"> | |
<h1 class="follow-title" id="follow-me">FOLLOW ME | |
<hr> | |
</h1> | |
<div class="social-icons"> | |
<ul class="nav navbar-nav social-list"> | |
<li><a href="https://github.com/itolimaesther" target="_blank"><i class="fa fa-github fa-2x" title="GitHub" aria-hidden="true"></i></a></li> | |
<li><a href="https://codepen.io/akholod/#" target="_blank"><i class="fa fa-codepen fa-2x" title="Code Pen" aria-hidden="true"></i></a></li> | |
<li><a href="https://www.linkedin.com/in/itolimaesther/" target="_blank"><i class="fa fa-linkedin fa-2x" title="LinkedIn" aria-hidden="true"></i></a></li> | |
<li><a href="https://www.facebook.com/itolimaesther"><i class="fa fa-facebook fa-2x" title="Facebook" aria-hidden="true"></i></a></li> | |
</ul> | |
</div> | |
</section> |
Sample for this topic on FCC https://forum.freecodecamp.org/t/navbar-change-position/225420
A Pen by Pedro Braga on CodePen.
window.onscroll = function() {myFunction()}; | |
var navbar = document.getElementById("navbar"); | |
var about = document.getElementById("about-section"); | |
var sticky = about.offsetTop - 75; | |
function myFunction() { | |
if (window.pageYOffset >= sticky) { | |
navbar.classList.add("sticky"); | |
navbar.classList.remove("not-fixed") | |
} else { | |
navbar.classList.add("not-fixed") | |
navbar.classList.remove("sticky"); | |
} | |
} |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body{ | |
margin: 0px; | |
font-family: "acumin-pro","Helvetica Neue",Helvetica,Arial,sans-serif; | |
line-height: 1.5; | |
overflow-x: hidden; | |
color: #2b2b2b; | |
} | |
main{ | |
position: relative; | |
max-width: 100%; | |
height: 680px; | |
} | |
.hero-image{ | |
/* width: 100%; | |
height: 700px; */ | |
background-image: url("https://images2.imgbox.com/24/1c/FsJ4AwKi_o.jpg"); | |
margin-top: -50px; | |
position: relative; | |
} | |
.hero-image, img{ | |
width: 100%; | |
height: 680px; | |
/* position: absolute; */ | |
} | |
.portfolio{ | |
position: relative; | |
margin: auto; | |
display: flex; | |
justify-content: center; | |
flex-direction: column; | |
align-items: center; | |
/* z-index: 2; */ | |
top: 40%; | |
} | |
.portfolio-title .portfolio-title_small{ | |
text-align: center; | |
color: #fff; | |
font-size: 40px; | |
line-height: 2; | |
} | |
span > .portfolio-title_small{ | |
font-size: 20px; | |
} | |
.portfolio-intro{ | |
text-align: center; | |
color: #fff; | |
font-size: 20px; | |
padding-top: 15px; | |
} | |
hr{ | |
width: 30%; | |
margin: auto; | |
} | |
/* header{ | |
min-height: 75px; | |
bottom: 0; | |
display: flex; | |
z-index: 2; | |
padding: 0px 20px 0px 20px; | |
justify-content: space-around; | |
align-items: center; | |
background-color: #ffffff; | |
width: 100%; | |
box-shadow: 0px 4px 5px 0px rgba(191,191,191,1); | |
} */ | |
#navbar{ | |
width: 100%; | |
overflow: hidden; | |
background-color: #fff; | |
box-shadow: 0px 4px 5px 0px rgba(191,191,191,1); | |
min-height: 75px; | |
align-items: center; | |
padding: 0px 20px 0px 20px; | |
} | |
.not-fixed{ | |
position:absolute; | |
bottom:0; | |
} | |
.sticky{ | |
position: fixed; | |
width: 100%; | |
top:0; | |
z-index:1; | |
} | |
/* nav{ | |
background-color: #fff; | |
position: relative; | |
} */ | |
nav ul{ | |
list-style:none; | |
padding:0; | |
margin:0; | |
text-align:center; | |
} | |
nav li{ | |
list-style: none; | |
float: right; | |
margin-right: 50px; | |
margin-left: 30px; | |
font-size: 18px; | |
text-transform: uppercase; | |
} | |
nav ul a { | |
height:65px; | |
line-height:65px; | |
padding:10px 15px; | |
color:#A1A1A1; | |
letter-spacing: 2px; | |
font-weight: 700; | |
text-transform: uppercase; | |
text-decoration:none; | |
} | |
/* nav ul li a{ | |
color: #000; | |
text-decoration: none; | |
} */ | |
nav a:hover { | |
background-color: grey; | |
cursor: pointer; | |
width: 20px; | |
color: #fff; | |
} | |
#about-section{ | |
position: relative; | |
/* background-color: grey; */ | |
/* position: fixed; */ | |
width: 100%; | |
bottom: 0; | |
left: 0; | |
margin-top: 3px; | |
height: 65%; | |
background-color: #e7e3e3; | |
padding-bottom: 10%; | |
padding-top: 10%; | |
} | |
#about-section, p, h1{ | |
text-align: center; | |
} | |
#about-section h1{ | |
/* padding-top: 10%; */ | |
font-size: 25px; | |
} | |
#about-section p{ | |
padding-top: 3%; | |
font-size: 15px; | |
} | |
.about-title, .about-intro{ | |
display: inline-block; | |
width: 65%; | |
margin: auto; | |
} | |
.about-title hr{ | |
width: 8%; | |
margin: auto; | |
border-width: 1.5px; | |
border-color: red; | |
} | |
.about-title{ | |
line-height: 2; | |
} | |
/* .concept { | |
margin: 50px 0 80px 0; | |
} */ | |
.concept .concept-item { | |
float: left; | |
} | |
.concept .concept-item .thumb { | |
position: relative; | |
display: block; | |
} | |
.concept .concept-item .thumb img{ | |
width: 100%; | |
height: auto; | |
display: block; | |
} | |
.concept-hover { | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
margin: 0; | |
background-color: rgba(0, 0, 0, 0.60); | |
opacity: 0; | |
filter: alpha(opacity=0); | |
-webkit-transition: all 0.3s; | |
transition: all 0.3s; | |
cursor: pointer; | |
overflow: hidden; | |
} | |
.concept-item:hover .concept-hover, | |
.concept-item:hover .concept-hover .concept-description, | |
.concept-item:hover .concept-hover .action-btn { | |
opacity: 1; | |
filter: alpha(opacity=100); | |
} | |
.concept-item:hover .concept-hover .concept-description { | |
top: 50%; | |
/*margin-bottom: -90px;*/ | |
} | |
.concept-hover .concept-description { | |
position: absolute; | |
top: 0%; | |
left: 0; | |
width: 100%; | |
opacity: 0; | |
filter: alpha(opacity=0); | |
-webkit-transform: translateY(-55%); | |
-ms-transform: translateY(-55%); | |
transform: translateY(-55%); | |
-webkit-transition: all 0.3s 0.2s; | |
transition: all 0.3s 0.2s; | |
padding: 10%; | |
} | |
.concept-description, | |
.concept-description h4, | |
.concept-description h4 a, | |
.concept-hover .action-btn a { | |
/*text-align: center;*/ | |
color: #fff; | |
} | |
.concept-description h4 { | |
margin-bottom: 15px; | |
font-size: 14px; | |
text-transform: uppercase; | |
font-weight: 800; | |
letter-spacing: 1px; | |
} | |
.concept-description p { | |
font-size:12px; | |
margin-bottom: 0; | |
font-weight: normal; | |
color: #fff; | |
line-height: 20px; | |
} | |
.concept-description a, | |
.concept-title a { | |
color: #fff; | |
} | |
/*gutter*/ | |
.concept.gutter .concept-item { | |
padding: 20px; | |
} | |
/*concept 1 grid*/ | |
.concept.col-1 .concept-item { | |
width: 33.3333333%; | |
} | |
/*concept 2 grid*/ | |
.concept.col-2 .concept-item { | |
width: 33.3333333%; | |
} | |
/*concept 3 grid*/ | |
.concept.col-3 .concept-item { | |
width: 33.3333333%; | |
} | |
/* .concepts-pages{ | |
display: grid; | |
grid-gap: 20px; | |
grid-template-columns: repeat(auto-fit, 300px); | |
grid-template-rows: repeat(2, 400px); | |
} | |
.concepts-pages > div > img { | |
width: 100%; | |
height: auto; | |
object-fit: cover; | |
} */ | |
#concept-works{ | |
position: relative; | |
width: 100%; | |
bottom: 0; | |
left: 0; | |
margin-top: 2px; | |
padding-bottom: 5%; | |
padding-top: 5%; | |
} | |
.section-title hr{ | |
width: 5%; | |
margin: auto; | |
border-width: 1.5px; | |
border-color: red; | |
margin-bottom: 20px; | |
} | |
.concept-pages{ | |
width: 100%; | |
height: 100%; | |
} | |