以下のこの JavaScript を使用して、ヘッダーがページの上部に到達すると固定位置に変わり、ユーザーがスクロールしても表示されたままになります。すべてが機能しているように見えますが、ヘッダーがジャンプし、まったくスムーズではありません。ない？ここで実際にテストしてください: http://loaistudio.com/
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#headerWrapper').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#headerWrapper').css({position: 'fixed', top: '0px'});
} else {
$('#headerWrapper').css({position: 'static', top: '0px'});
}
});
});
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Martin Izehi</title>
<meta name="description" content=""/>
<meta name="keywords" content="">
<meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=0, maximum-scale=10.0, initial-scale=1.0" />
<link rel="shortcut icon" href="assets/elements/favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/core.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="assets/css/tablets-landscape.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="assets/css/tablets-portrait.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="assets/css/phone.css"/>
<!--Libraries-->
<script type="text/javascript" src="assets/libraries/jquery.js"></script>
</head>
<body>
<div class="wrapper" id="page"><!--Website Content-->
<header><!--Header-->
<div id="headerWrapper">
<div id="headerContent">
<nav><ul id="mainMenu"><!--Main Menu-->
<li><a class="active" href="" id="about">About Martin</a></li>
<li><a href="" id="discography">Discography</a></li>
<li><a href="" id="contact">Get In Touch</a></li>
</ul></nav>
</div>
</div>
</header>
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">Martin Izehi</p>
</div>
<div class="wrapper"><!--Page Content-->
<div id="home-sectionA" class="content">
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
<h1>Welcome To The New Website Template</h1>
<h2>Welcome To The New Website Template</h2>
<h3>Welcome To The New Website Template</h3>
<h4>Welcome To The New Website Template</h4>
<p>Welcome To The New Website Template</p>
<p><strong>Welcome To The New Website Template</strong></p>
<p><em>Welcome To The New Website Template</em></p>
<p><small>Welcome To The New Website Template</small></p>
<span>Welcome To The New Website Template</span>
</div>
</div>
</div><!--End Of The Page-->
<footer id="footer"><!--Footer Section-->
<div id="footerContent">
<p>Copyright ©2013 Website Name. All rights reserved.</p><a href="http://www.loaidesign.co.uk" target="_blank"style="padding-top: 10px;">Website Designed By<img style="display: inline-block; margin: 0 0 2px 5px; vertical-align: middle;" alt="loai design studio responsive website design" src="assets/elements/loaidesignstudio-logo.png"></a>
</div>
</footer>
</div><!--The End Of The Page-->
<!--Scripts Links-->
<script type="text/javascript" src="assets/js/slider.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script src="assets/libraries/modernizr.js"></script>
</body>
CSS:
body {
background: #000000 url('../elements/background.png') no-repeat center top;
line-height: 125%;
text-align: center;
overflow-x: hidden;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
}
/*Font Face*/
@font-face { font-family: Candela; src: url('CandelaBook.otf'); }
@font-face { font-family: Candela; font-weight: bold; src: url('CandelaBold.otf');}
/*Fonts*/h1, h2, h3, h4, h5, h6, p, pre, a, ol, li, span, label, blockquote, figcaption, abbr, td, input, textarea {
font-family: 'Candela', sans-serif;
font-size: 1em;
color: #636363;
}
h1 {
color: #636363;
font-size: 2em;
line-height: 120%;
font-weight: bold;
padding-bottom: 5px;
}
h2 {
color: #636363;
font-size: 2em;
line-height: 120%;
font-weight: bold;
padding-bottom: 5px;
}
h3 {
font-size: 1.5em;
font-weight: bold;
padding-bottom: 5px;
}
h4 {
font-size: 1em;
font-weight: bold;
padding-bottom: 5px;
}
small {
font-size: 0.813em;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/*MAIN/////////////////////////////////////////////////////////////////////*/
/*Main Page*/#page {
width: 100%;
padding-top: 600px;
position: relative;
overflow: hidden;
}
/*Wrappers*/.wrapper { width: 100%; overflow: hidden; }
.wrapper {
background: url('../elements/texture.png') repeat;
}
/*Content Container*/.content {
width: 1030px;
padding: 0 20px;
margin: auto;
overflow: hidden;
clear: both;
}
/*HEADER///////////////////////////////////////////////////////////////////*/
/*Header Wrapper*/#headerWrapper {
width: 100%;
}
/*Header Content Container*/#headerContent {
width: 1030px; height: 80px;
padding: 10px 20px;
margin: auto;
overflow: hidden;
}
/*Header Logo*/#headerLogo {
width: 200px;
display: inline-block;
}
/*Main Menu*/#mainMenu {
display: inline-block;
}
#mainMenu li {
float: left;
}
#mainMenu a {
color: #9F8558;
padding: 10px 15px;
margin-left: 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: background 0.1s linear;
-moz-transition: background 0.1s linear;
-ms-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#mainMenu a:hover {
color: #76141A;
}
#mainMenu a.active {
color: #EDE3D1;
background-color: #9F8558;
cursor: default;
}
/*Tablet & Phone Header (Hidden From Widescreen's)*/
.secondHeader-menuButton, #secondHeader, #logo-smallScreen {
display: none;
}
/*FOOTER////////////////////////////////////////////////////////////////////*/
/*Footer Section*/
#footer {
text-align: center;
width: 100%;
}
#footerContent {
width: 1030px;
padding: 20px;
margin: auto;
}
#footerContent * {
color: #FFFFFF;
font-size: 13px;
}
/*PAGES////////////////////////////////////////////////////////////////////*/
/*Page Name*/