Skip to content

Instantly share code, notes, and snippets.

@thatjeannie

thatjeannie/fix-nav.js

Last active August 29, 2015 14:17
Show Gist options
  • Save thatjeannie/c131f418a41cc4ad53c3 to your computer and use it in GitHub Desktop.
Save thatjeannie/c131f418a41cc4ad53c3 to your computer and use it in GitHub Desktop.
Download ZIP
Fix nav after scroll JQUERY HTML CSS
Raw
fix-nav.js
$(document).ready(function() {
// fix client strip and shrink client photo
if($(window).width() >= 769){
$(window).on('scroll', function() {
var $fix = $("#fix");
var headerH = $("#header").outerHeight();
var scrolled = $(window).scrollTop();
if (scrolled >= headerH) {
$fix.addClass("fixed");
$("#user_photo").addClass("fixed");
} else {
$fix.removeClass("fixed");
$("#user_photo").removeClass("fixed");
}
});
}
});
Raw
zzz.css
@media screen and (min-width: 768px) { .container-trim { padding-right: 0; padding-left: 0; } }
@media screen and (min-width: 768px) { .row-trim { margin-right: 0; margin-left: 0; } }
@media screen and (min-width: 768px) { .col-trim { padding-right: 0; padding-left: 0; } }
@media screen and (min-width: 768px) {
.navbar-header, .navbar-nav { float: none; text-align: center; }
.navbar-nav > li { display: inline-block; float: none; }
}
.navbar-brand { float: none; display: block; margin-top: 20px; }
.navbar-nav {
margin-bottom: 40px;
}
.bg-trim {
color: #fff;
background-color: #89ae37;
}
.user-details {
text-transform: uppercase;
text-align: center;
}
.photo-box {
position: relative;
}
.photo-box .user-photo {
border: 6px solid #fff;
max-width: 40%;
display: block;
margin: 20px auto;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.subtitle {
font-size: 20px;
}
.name,
.subtitle {
margin-left: 60px;
}
.user-details a {
color: #6a882b;
}
.user-details .social-links {
font-size: 20px;
text-align: center;
padding: 0;
margin-top: 25px;
margin-bottom: 14px;
}
.user-details .social-links li {
list-style: none;
display: inline-block;
margin-right: 4px;
}
.user-details .social-links li a {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 2px solid #6a882b;
border-radius: 100%;
}
.user-details .social-links li a:hover {
color: #fff;
}
.user-details .social-links li a:hover {
border-color: #fff;
}
.text {
margin: 40px 0;
}
@media screen and (min-width: 768px) {
.user-details {
height: 162px;
text-align: initial;
}
.user-details.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
box-shadow: 0 6px 0 rgba(51, 51, 51, 0.1);
}
.photo-box .user-photo {
position: absolute;
z-index: 20;
max-width: 80%;
display: initial;
margin: 0 0 0 30px;
}
.photo-box .user-photo.fixed {
width: 80px;
height: 80px;
top: 6px;
}
.name {
margin-top: 14px;
}
.phone {
margin-top: 26px;
}
}
@media screen and (min-width: 1200px) {
.user-details {
height: 92px;
}
.photo-box .user-photo {
top: -30px;
max-width: 100%;
}
.user-details .phone,
.user-details .email {
margin-left: 0;
}
}
@media screen and (min-width: 1300px) {
.photo-box .user-photo {
top: -40px;
}
}
@media screen and (min-width: 1400px) {
.photo-box .user-photo {
top: -60px;
}
}
Raw
zzz.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fix Nav after Scroll</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid container-trim">
<header id="header">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<i class="fa fa-navicon"></i> Menu
</button>
<a href="#" class="navbar-brand">Brand/Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#" class="active">zzz</a></li>
<li><a href="#">zzz</a></li>
<li><a href="#">zzz</a></li>
<li><a href="#">zzz</a></li>
<li><a href="#">zzz</a></li>
<li><a href="#">zzz</a></li>
</ul>
</div>
</nav>
</header>
<section class="user-details bg-trim" id="fix">
<div class="row row-trim">
<div class="col-lg-5 col-trim">
<div class="row row-trim">
<div class="col-sm-2 col-md-3 col-lg-2 col-trim">
<div class="photo-box">
<img src="http://placehold.it/200x200" alt="user photo" class="user-photo" id="user_photo">
</div>
</div>
<div class="col-sm-10 col-md-9 col-lg-10 col-trim">
<h1 class="name">Butch Baker</h1>
<h2 class="subtitle">Candlestick Maker</h2>
</div>
</div>
</div>
<div class="col-lg-7 col-trim">
<div class="row row-trim">
<div class="col-sm-6 col-trim">
<div class="phone"><i class="fa fa-phone"></i> 555-555-5555</div>
<div class="email"><i class="fa fa-envelope"></i> longishemailaddress@example.com</div>
</div>
<div class="col-sm-6 col-trim">
<ul class="social-links">
<li><a href="#" target="_blank"><i class="fa fa-github fa-fw"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-behance fa-fw"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<section class="text">
<h1>Knights of the Old Republic</h1>
<p>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide. I'm surprised you had the courage to take the responsibility yourself. In my experience, there is no such thing as luck.</p>
<h2>Return of the Jedi</h2>
<p>I'm surprised you had the courage to take the responsibility yourself. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You don't believe in the Force, do you? Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- What!?</p>
<ul>
<li>She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</li>
<li>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force.</li>
</ul>
<h3>The Clone Wars</h3>
<p>The plans you refer to will soon be back in our hands. I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. As you wish. The plans you refer to will soon be back in our hands. I need your help, Luke. She needs your help. I'm getting too old for this sort of thing.</p>
<h4>Return of the Jedi</h4>
<p>I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. I'm surprised you had the courage to take the responsibility yourself. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. I care. So, what do you think of her, Han? A tremor in the Force. The last time I felt it was in the presence of my old master. I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.</p>
<ol>
<li>Ye-ha!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>I'm surprised you had the courage to take the responsibility yourself.</li>
<li>The plans you refer to will soon be back in our hands.</li>
</ol>
<h5>Revenge of the Sith</h5>
<p>In my experience, there is no such thing as luck. But with the blast shield down, I can't even see! How am I supposed to fight? Escape is not his plan. I must face him, alone. I find your lack of faith disturbing. What!? You mean it controls your actions?</p>
<hr>
<h1>A New Hope</h1>
<p>Don't underestimate the Force. As you wish. In my experience, there is no such thing as luck. You are a part of the Rebel Alliance and a traitor! Take her away!</p>
<h2>The Rebel Force</h2>
<p>I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide. I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- Partially, but it also obeys your commands.</p>
<ul>
<li>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense.</li>
<li>Escape is not his plan. I must face him, alone.</li>
<li>She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</li>
</ul>
<h3>Jedi Academy</h3>
<p>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Your eyes can deceive you. Don't trust them. I call it luck. I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. I call it luck. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.</p>
<h4>The Rebel Force</h4>
<p>You are a part of the Rebel Alliance and a traitor! Take her away! The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. What?! Don't underestimate the Force. I call it luck.</p>
<ol>
<li>Ye-ha!</li>
<li>Obi-Wan is here. The Force is with him.</li>
<li>I need your help, Luke. She needs your help. I'm getting too old for this sort of thing.</li>
<li>Don't underestimate the Force.</li>
</ol>
<h5>Revenge of the Sith</h5>
<p>Hey, Luke! May the Force be with you. Ye-ha! I care. So, what do you think of her, Han? I'm trying not to, kid. Escape is not his plan. I must face him, alone. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you.</p>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment