Skip to content

Instantly share code, notes, and snippets.

@jackiewu

jackiewu/Sticky Menu.markdown

Created June 2, 2016 02:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jackiewu/600c41625d3f931e9894f9100422c998 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jackiewu/600c41625d3f931e9894f9100422c998 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky Menu
Raw
index.html
<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>
Raw
script.js
$(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);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
Sticky Menu.markdown
Raw
style.css
@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;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment