Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
​
<body style="background-color: white;">
​
  <div class="w3-container w3-xlarge" id="head">
    <h id="font1">Loftus</h>
    <h id="font2">DENTAL</h>
​
    <div id="Bla">
      <h id="font3">Bla</h>
      <h id="font4">&</h>
      <h id="font3">bla</h>
    </div>
  </div>
​
  <div class="menu">
    <ul class="nav">
      <h class="logo">
        <h id="font1-1">Loftus</h>
        <h id="font2-2">DENTAL</h>
      </h>
      <h class="link">
        <li> <a href="#">Home</a>
        </li>
        <li> <a href="#">Photo's</a>
        </li>
        <li> <a href="#">Contact</a>
        </li>
      </h>
    </ul>
  </div>
 
body,
head {
  padding: 0px auto;
  margin: 0px auto;
  width: 100%;
  height: 3000px;
}
#head {
  background-color: white;
  color: white;
  padding-left: 30px;
  padding-bottom: 8px;
  padding-top: 8px;
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #3279B8;
  color: #fff;
  padding-left: 30px;
  padding-bottom: 0px;
  padding-top: 4px;
  font-family: Raleway-Regular;
  font-size: 23px;
}
.nav a {
  display: inline-block;
  padding: 15px 30px 15px 30px;
}
.nav li {
  display: inline;
}
.menu a {
  display: inline-block;
  text-decoration: none;
}
.menu a:after {
  content: "";
  display: block;
  width: 100%;
  opacity: 0;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 1px;
  margin: 0 auto;
  transition: all 0.3s linear 0s;
}
.menu a:hover:after {
  opacity: 1;
}
.logo {
  position: relative;
}
.link {
  margin-left: 35%;
  color: #fff;
}
​
a {
  color: #fff;
  }
​
Fonts:(I know they fucked up...)
​
@font-face {
  font-family: Kaushan Script;
  src: url(font/KaushanScript.otf);
}
@font-face {
  font-family: Quicksand-Regular;
  src: url(font/Quicksand-Regula
    r.ttf);
}
@font-face {
  font-family: Quicksand-Bold;
  src: url(font/Quicksand-Bold.ttf);
}
@font-face {
  font-family: Quicksand-Light;
  src: url(font/Quicksand-Light.ttf);
}
@font-face {
  font-family: Raleway-Regular;
  src: url(font/Raleway-Regular.ttf);
}
@font-face {
  font-family: Raleway-ExtraLight;
  src: url(font/Raleway-ExtraLight.ttf);
}
@font-face {
  font-family: Raleway-Light;
  src: url(font/Raleway-Light.ttf);
}
@font-face {
  font-family: Raleway-Medium;
  src: url(font/Raleway-Medium.ttf);
}
#font1 {
  font-family: Kaushan Script;
  font-size: 40px;
  color: #3279B8;
}
#font1-1 {
  font-family: Kaushan Script;
  font-size: 32px;
  color: #ffffff;
}
#font2 {
  font-family: Quicksand-Bold;
  font-size: 35px;
  margin-left: 8px;
  color: #A3A3A3;
}
#font2-2 {
  font-family: Quicksand-Bold;
  font-size: 32px;
  margin-left: 8px;
  color: #A3A3A3;
}
#font3 {
  font-family: Quicksand-Light;
  font-size: 30px;
  color: #3F3F3F;
}
#font4 {
  font-family: Raleway-ExtraLight;
  font-size: 22px;
  color: #3F3F3F;
}
#Bla {
  float: right;
  padding-top: 9px;
  padding-right: 30px;
}
.logo {
  position: absolute;
}
@media screen and (max-width: 500px) {
  .logo {
    position: static;
  }
}
 
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide();
​
scrollIntervalID = setInterval(stickIt, 10);
​
​
function stickIt() {
​
  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;
​
  if ($(window).scrollTop() >= (orgElementTop)) {
​
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
    $('.original').css('visibility', 'hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility', 'visible');
  }
}
​
​
​
$(document).ready(function() {
  $('.logo').hide();
});
$(document).scroll(function(e) {
  if (document.body.scrollTop >= 76) {
    $('.logo').fadeIn();
  } else {
    $('.logo').fadeOut();
  }
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers