//スティッキーヘッダー(
var _window = $(window);
var topMain = $("main").offset().top; //main要素のTOP位置を取得
var sticky = false;
//スクロールでヘッダーをコピー
_window.one("scroll", function () {
$cloneHeader = $("#header").clone().attr("id","clone").insertAfter("#header");
});
_window.on("scroll", function () {
if (_window.scrollTop() > topMain) {
if ( sticky === false ){
$cloneHeader.slideDown();
sticky = true;
}
} else {
if ( sticky === true ){
$cloneHeader.slideUp();
sticky = false;
}
}
});
<body>
<div id="wrapper">
<header id="header">
<div class="inner">
<h1>Demo</h1>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!-- /inner -->
</header>
<main>
<section id="content">
<div class="inner">
<div id="arrow">
<span class="left"></span>
<span class="right"></span>
<span class="icon"></span>
</div><!-- /arrow -->
<h1>Title</h1>
<p>sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.</p>
<h1>Title</h1>
<p>sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.</p>
<h1>Title</h1>
<p>sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.sample text.</p>
</div><!-- /inner -->
</section>
</main>
</div><!-- /wrapper -->
<!--st js-->
<script src="js/script.js"></script>
</body>
</html>
</main>
</div><!-- /wrapper -->
</body>
#header {
background: #1c262f;
}
#header .inner {
overflow: hidden;
padding: 8px 0px 10px 0;
}
#header .inner h1 {
float: left;
font-size: 20px;
font-size: 2rem;
}
#header .inner ul {
float: left;
font-size: 8px;
font-size: 0.8rem;
margin: 20px 0 10px 20px;
}
#header .inner ul li {
float: left;
margin-right: 20px;
}
#header .inner ul li a {
color: #ffffff;
text-decoration: none;
}
#clone {
background: #f66f6f;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
display: none;
z-index: 9999;
}
#clone h1 {
font-size: 10px;
font-size: 1rem;
float: left;
font-weight: bold;
color: #1c262f;
}
#clone ul {
float: left;
font-size: 4px;
font-size: 0.4rem;
margin: 5px 0 10px 20px;
}
#clone ul li {
float: left;
margin-right: 20px;
}
#clone ul li a {
color: #1c262f;
text-decoration: none;
}
#top {
padding: 60px 0px 80px 0px;
text-align: center;
}
#top h1 {
background: #1e272f;
width: 300px;
height: 300px;
margin: auto;
font-weight: bold;
border-radius: 50%;
position: relative;
font-size: 50px;
font-size: 5rem;
}
#top h1 span {
position: absolute;
top: 85px;
width: 300px;
left: 0px;
text-align: center;
}
#content {
background: #252f39;
border-top: #f66f6f 2px solid;
}
#content .inner {
position: relative;
padding: 50px 0;
}
#content .inner h1 {
font-family: 'Dancing Script', cursive;
font-size: 30px;
font-size: 3rem;
}
#content .inner p {
font-family: 'Droid Sans', sans-serif;
line-height: 2.0;
margin-bottom: 30px;
}
#content #arrow {
width: 64px;
border-radius: 50%;
overflow: hidden;
display: block;
position: absolute;
left: 0px;
margin-left: 452px;
top: -32px;
}
#content #arrow .left {
width: 32px;
height: 64px;
float: left;
background: #f66f6f;
}
#content #arrow .right {
width: 32px;
height: 64px;
float: right;
background: #d56060;
}
#content #arrow .icon {
position: absolute;
width: 15px;
height: 9px;
left: 24px;
top: 29px;
background: url(../images/icon.png) no-repeat;
}