Visit Finland

中間にあるナビゲーションバーがスクロールで上部に引っ付きタイトルも表示される
stickyを使わないでjavascriptを使用
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet

Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Laborum, ex.

floatを回避・解除するには、clear:both;　を使う。

html file iconHTML

				
<header>
 <div class="header-banner">
  <h1>Visit Finland</h1>
 </div>
 <div class="clear"></div>
 <nav id="navId">
  <div class="site-title">Finland</div>
  <ul>
   <li><a href="/archive">Archive</a></li>
   <li><a href="/contact">Contact</a></li>
  </ul>
 </nav>
</header>

<section class="content">
 <article>
  <p>中間にあるナビゲーションバーがスクロールで上部に引っ付きタイトルも表示される 
  <br>consectetur adipisicing elit. Laborum, ex.
  Lorem ipsum, dolor sit amet 
  <br>consectetur adipisicing elit. Laborum, ex.
  Lorem ipsum, dolor sit amet 
  <br>consectetur adipisicing elit. Laborum, ex.
  Lorem ipsum, dolor sit amet </p>
  <p><img src="https://placehold.jp/3d4070/ffffff/660x150.png"></p>
  <p>Lorem ipsum, dolor sit amet 
  <br>consectetur adipisicing elit. Laborum, ex.
  Lorem ipsum, dolor sit amet 
  <br>consectetur adipisicing elit. Laborum, ex.
  Lorem ipsum, dolor sit amet 
  <br>consectetur adipisicing elit. Laborum, ex.
  Lorem ipsum, dolor sit amet </p>
 </article>
 <aside>
  <img src="https://placehold.jp/3d4070/ffffff/144x150.png">
  <img src="https://placehold.jp/3d4070/ffffff/144x150.png">
 </aside>      	
</section>

scss file iconSCSS

				
body{
	margin:0px;
	padding:0px;
	color:#292f36;
	font-family:'Open sans';
	line-height:1.6;
}
header{
	// 高さ560pxは画像 + navの高さ
	height:560px;
	z-index:10;
	.header-banner{
		background-color:#333;
		background-image:url('human-cover01.jpg');
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
		width:100%;
		// js	のスクロールイベントの高さを一致させること
		height:500px;
		h1{
			background-color:rgba(18, 72, 120, 0.8);
			color:#ffffff;
			padding:0 1rem;
			position:absolute;
			top:2rem;
			left:2rem;
		}
	}
	nav{
		width:100%;
		height:60px;
		background:#292f36;
		z-index:10;
		&.fixed-header{
			position:fixed;
			top:0;
			left:0;
			width:100%;
		}
		div{
			color:white;
			font-size:2rem;
			line-height:60px;
			position:absolute;
			top:0;
			left:2%;
			visibility:hidden;
			&.visible-title{
				visibility:visible;
			}
		}
		ul{
			list-style-type:none;
			margin: 0 2% auto 0;
			padding-left:0;
			text-align:right;
			max-width:100%;
			li{
				display:inline-block;
				line-height:60px;
				margin-left:10px;
				a{
					text-decoration:none;
					color:#a9abae;
				}
			}
		}
	}
}
section.content{
	margin:0 auto;
	padding:4rem 0;
	width:960px;
	max-width:100%;
	article{
		float:left;
		width:720px;
		p{
			&:first-of-type{
				margin-top:0;
			}
			img{
				max-width:100%;
			}
		}
	}
	aside{
		float:right;
		width:120px;
	}
}
@media (max-width: 960px){
	section.content{
		padding:2rem 0;
		article{
			float:none;
			margin:0 auto;
			width:96%;
			
			&:last-of-type{
				margin-bottom:3rem;
			}
		}
		aside{
			float:none;
			text-align:center;
			width:100%;
		}
	}
}

JS

				
// 中間にあるナビゲーションバーがスクロールで上部に引っ付きタイトルも表示される
function headerFixed(){
	const rollUp = document.getElementById('navId');
	const siteTitle = document.querySelector('.site-title');
	// 500はheader-banner（画像）の高さと一致させること
	if(this.scrollY >=300){
		rollUp.classList.add('fixed-header');
		siteTitle.classList.add('visible-title');
	}else{
		rollUp.classList.remove('fixed-header');
		siteTitle.classList.remove('visible-title');
	}
}
window.addEventListener('scroll', headerFixed);