Memasang Fungsi Sticky Pada Menu Horizontal
A Pen by Arlina Design on CodePen.
<div id="arlina"> | |
<div id="header"> | |
<h1>SCROLL DOWN</h1></br> | |
<p>Memasang Fungsi Sticky Pada Menu Horizontal</div> | |
<div id="menuwrap"> | |
<div id="menu"><span>Sticky Menu</span></div> | |
</div> | |
<div id="content"> | |
<div id="main"> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
<div id="box"></div> | |
</div> | |
<div id="side"> | |
<div id="sidecontent2" class="cf"><span>Static Widget</span></div> | |
<div id="sidecontent2" class="cf"><span>Static Widget</span></div> | |
<div id="sidecontent2" class="cf"><span>Static Widget</span></div> | |
<div id="sidecontent2" class="cf"><span>Static Widget</span></div> | |
</div> | |
</div> | |
<div id="footer" class="cf"></div> | |
<div id="credit"><span>by. Arlina Design All Right Reserved</span></div> | |
</div> | |
<div class='back-to-top' id='back-to-top' title='Back to top'><i class='fa fa-chevron-up' /></div> |
$(function() { | |
var top = $('#menu').offset().top - parseFloat($('#menu').css('marginTop').replace(/auto/, 0)); | |
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0)); | |
var maxY = footTop - $('#menu').outerHeight(); | |
$(window).scroll(function(evt) { | |
var y = $(this).scrollTop(); | |
if (y > top) { | |
if (y < maxY) { | |
$('#menu').addClass('fixed').removeAttr('style'); | |
} else { | |
$('#menu').removeClass('fixed').css({ | |
position: 'absolute', | |
top: (maxY - top) + 'px' | |
}); | |
} | |
} else { | |
$('#menu').removeClass('fixed'); | |
} | |
}); | |
}); | |
// Back to top button | |
(function() { | |
$(document).ready(function() { | |
return $(window).scroll(function() { | |
return $(window).scrollTop() > 200 ? $("#back-to-top").addClass("show") : $("#back-to-top").removeClass("show") | |
}), $("#back-to-top").click(function() { | |
return $("html,body").animate({ | |
scrollTop: "0" | |
}) | |
}) | |
}) | |
}).call(this); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(http://fonts.googleapis.com/css?family=Quicksand); | |
body { | |
margin: 0; | |
padding: 0; | |
background: #e6e6e6; | |
font-family: Quicksand, sans-serif; | |
} | |
#arlina { | |
background: #fff; | |
position: relative; | |
margin: 5% auto; | |
width: 100%; | |
max-width: 920px; | |
overflow: hidden; | |
box-shadow: 0 0 0 20px rgba(0,0,0,0.03); | |
} | |
#header { | |
height: 200px; | |
margin: 0; | |
background: #fdfdfd; | |
} | |
#header h1 { | |
display: table; | |
color: #999; | |
font-weight: 400; | |
text-align: center; | |
margin: auto; | |
padding: 50px 50px 0 50px; | |
font-size: 55px; | |
} | |
#header p { | |
display: table; | |
color: #999; | |
font-weight: 400; | |
text-align: center; | |
margin: auto; | |
padding: 10px; | |
font-size: 20px; | |
} | |
#menuwrap { | |
float: left; | |
background: #fff; | |
width: 100%; | |
position: relative; | |
margin: 0 auto 20px auto; | |
padding: 0; | |
height: 60px; | |
} | |
#menu { | |
position: absolute; | |
width: 100%; | |
max-width: 920px; | |
height: 60px; | |
margin: auto; | |
background: #fc4f3f; | |
z-index: 99; | |
} | |
#menu span { | |
display: table; | |
color: #fff; | |
text-align: center; | |
margin: auto; | |
padding: 20px 0; | |
font-size: 20px; | |
} | |
#menu:before { | |
position: absolute; | |
content: ''; | |
display: inline-block; | |
left: 0; | |
top: 0; | |
height: 60px; | |
width: 80px; | |
margin: 0; | |
text-align: center; | |
background: #444; | |
} | |
#menu:after { | |
position: absolute; | |
content: '\f015'; | |
display: inline-block; | |
font-family: FontAwesome; | |
left: 0; | |
top: 0; | |
height: 60px; | |
line-height: 60px; | |
width: 80px; | |
margin: 0; | |
text-align: center; | |
color: #fff; | |
font-size: 20px; | |
} | |
#content { | |
position: relative; | |
width: 100%; | |
height: 1850px; | |
margin: 0; | |
background: #fff; | |
padding: 20px 0; | |
} | |
#main { | |
position: relative; | |
float: left; | |
width: 70%; | |
background: #fff; | |
} | |
#box { | |
position: relative; | |
width: 93.5%; | |
height: 150px; | |
display: block; | |
background: #f6f6f6; | |
margin: 0 20px 20px 20px; | |
} | |
#box:before { | |
position: absolute; | |
content: ''; | |
display: inline-block; | |
left: 0; | |
top: 0; | |
height: 150px; | |
width: 200px; | |
margin: 0; | |
background: #e6e6e6; | |
} | |
#box:after { | |
position: absolute; | |
content: '\f1cb'; | |
font-family: FontAwesome; | |
display: inline-block; | |
left: 0; | |
right: 0; | |
top: 0; | |
text-align: center; | |
height: 150px; | |
line-height: 150px; | |
width: 200px; | |
margin: 0; | |
color: #bbb; | |
font-size: 50px; | |
} | |
#side { | |
background: #fff; | |
width: 30%; | |
float: right; | |
position: relative; | |
margin: 0; | |
padding: 0; | |
} | |
#sidecontent2 { | |
width: 255px; | |
height: 200px; | |
margin: 0 20px 20px auto; | |
background: #999; | |
position: relative; | |
} | |
#sidecontent2 span { | |
display: table; | |
color: #fff; | |
text-align: center; | |
margin: auto; | |
padding: 20px 0; | |
font-size: 25px; | |
} | |
#footer { | |
height: 200px; | |
clear: both; | |
background: #444; | |
} | |
#credit { | |
height: 60px; | |
margin: 0; | |
background: #fff; | |
} | |
#credit span { | |
display: table; | |
color: #999; | |
text-align: center; | |
font-size: 20px; | |
line-height: 60px; | |
margin: auto; | |
} | |
.cf:before, | |
.cf:after { | |
content: " "; | |
display: table; | |
} | |
.cf:after { | |
clear: both; | |
} | |
#menu.fixed { | |
position: fixed; | |
top: 0; | |
z-index: 99; | |
} | |
/* Back to top */ | |
.back-to-top { | |
visibility: hidden; | |
background-color: #444; | |
width: 50px; | |
height: 50px; | |
text-align: center; | |
line-height: 48px; | |
position: fixed; | |
bottom: 65px; | |
right: 35px; | |
z-index: 90; | |
cursor: pointer; | |
border-radius: 1px; | |
opacity: 0; | |
-webkit-transform: translateZ(0); | |
transition: all .6s | |
} | |
.back-to-top .fa { | |
font-size: 18px; | |
color: #fff; | |
vertical-align: middle; | |
} | |
.back-to-top:hover { | |
background-color: #fc4f3f; | |
opacity: 1 | |
} | |
.back-to-top.show { | |
visibility: visible; | |
bottom: 35px; | |
opacity: 1; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |