ロゴのサイズを変更し、一部のディビジョンをスクロールダウンする方法

Question

ロゴを縮小してdivを非表示にし、scrollbのメニューバーの位置を変更したい場合はスクロールでナビゲーションバーを縮小しますが、menuitem位置を縮小してロゴは縮小しませんあなたはjqueryの使用している場合、あなたが望むなら、私は私のdivクラスcontact_detailsを隠し、右

<header> 
    <div class="top_nav"> 
    <div class="logo"> 
     <a id="site-logo" href="#"><img src="#" alt="LOGO"></a> 
     </div> 
     <div class="contact_details"> 
      <p>Need Help, Call: 062 445676654 |<a href="#"> Mail</a></p> 
     </div> 
     <div class="nav_bar"> 
      <ul> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Solution</a></li> 
       <li><a href="#">Support</a></li> 
       <li><a href="#">Partners</a></li> 
       <li><a href="#">Contacts</a></li> 
      </ul> 
     </div> 
    </div> 
</header> 
<div class="container"> 
</div> 
<div class="site-dt"> 

</div> 

*{ 
    margin: 0; 
    padding: 0; 
} 

/* Top Menu Start Here */ 

.top_nav{ 
    width: 100%; 
    background: rgba(0,0,0,.5); 
    position: fixed; 
} 

.top_nav .logo{ 
    margin-top: 2px; 
    margin-left: 20px; 
    height: 75px; 
    width: 200px; 
    float: left; 
    position: absolute; 
} 

.contact_details{ 
    margin-top: 5px; 
    margin-left: 1115px; 
    min-height: 25px; 
    min-width: 230px; 
    float: right; 
    color: #fff; 
    position: absolute; 
} 

.contact_details p{ 
    font-size: 14px; 
    text-align: center; 
} 

.contact_details p a{ 
    text-decoration: none; 
    color: #fff; 
} 

.nav_bar{ 
    margin-left: 700px; 
    margin-top: 55px; 
    position: absolute; 
} 

.nav_bar ul{ 
    list-style-type: none; 
} 

.nav_bar ul li{ 
    display: inline-block; 
    text-align: center; 
    float: left; 
} 

.nav_bar ul li a{ 
    text-decoration: none; 
    padding: 12px; 
    margin: 8px; 
    font-size: 20px; 
    color: #fff; 
    position: relative; 
} 

.nav_bar ul li a::after{ 
    content: ''; 
    display: inline-block; 
    position:absolute; 
    width: 0px; 
    height: 5px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background: #ff6600; 
    transition: width .4s; 
} 

.nav_bar ul li a:hover::after{ 
    width: 100%; 

} 

.container{ 
    height: 100vh; 
    width: 100%; 
    max-width: 100%; 
    overflow: hidden; 
    background-image: url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    top: 0; 
    z-index: -1; 
} 

.site-dt{ 
    background-color: #00d03e; 
    height: 573px; 
    width: 100%; 
} 


    $(function() 
{ 
     var navStatesInPixelHeight = [65,90]; 

     var changeNavState = function(nav, newStateIndex) { 
     nav.data('state', newStateIndex).stop().animate({ 
      height : navStatesInPixelHeight[newStateIndex] + 'px' 
     }, 600); 
     }; 

     var boolToStateIndex = function(bool) { 
     return bool * 1;  
     }; 

     var maybeChangeNavState = function(nav, condState) { 
     var navState = nav.data('state'); 
     if (navState === condState) { 
      changeNavState(nav, boolToStateIndex(!navState)); 
     } 
     }; 

     $('.top_nav').data('state', 1); 

     $(window).scroll(function(){ 
     var $nav = $('.top_nav'); 

     if ($(document).scrollTop() > 0) { 
      maybeChangeNavState($nav, 1); 
     } else { 
      maybeChangeNavState($nav, 0); 
     } 
     }); 
    }); 

Answer 1

の場合はお知らせくださいelseステートメント それに応じてCSSを書く.fixed-class-name

スクロールのjQueryコードをチェックする

$(window).scroll(function() { 
    var $nav = $('.top_nav'); 
    var scrolTop = $(window).scrollTop(); 

    if (scrolTop > 0) { 
     $nav.addClass("fixed-nav"); 
    } else { 
     $nav.removeClass("fixed-nav"); 
    } 
    }); 

$(function() { 
 
    var navStatesInPixelHeight = [65, 90]; 
 

 
    var changeNavState = function(nav, newStateIndex) { 
 
    nav.data('state', newStateIndex).stop().animate({ 
 
     height: navStatesInPixelHeight[newStateIndex] + 'px' 
 
    }, 600); 
 
    }; 
 

 
    var boolToStateIndex = function(bool) { 
 
    return bool * 1; 
 
    }; 
 

 
    var maybeChangeNavState = function(nav, condState) { 
 
    var navState = nav.data('state'); 
 
    if (navState === condState) { 
 
     changeNavState(nav, boolToStateIndex(!navState)); 
 
    } 
 
    }; 
 

 
    $('.top_nav').data('state', 1); 
 

 
    //Scroll Script here 
 
    $(window).scroll(function() { 
 
    var $nav = $('.top_nav'); 
 
    var scrolTop = $(window).scrollTop(); 
 

 
    if (scrolTop > 0) { 
 
     $nav.addClass("fixed-nav"); 
 
    } else { 
 
     $nav.removeClass("fixed-nav"); 
 
    } 
 
    }); 
 

 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/* Top Menu Start Here */ 
 

 
.top_nav { 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, .5); 
 
    position: relative; 
 
    transition:all 0.7s ease; 
 
    -webkit-transition:all 0.7s ease; 
 
    -moz-transition:all 0.7s ease; 
 
    -o-transition:all 0.7s ease; 
 
    -ms-transition:all 0.7s ease; 
 
} 
 
.top_nav .logo { 
 
    margin-top: 2px; 
 
    margin-left: 20px; 
 
    height: 75px; 
 
    width: 200px; 
 
    float: left; 
 
    transition:all 0.7s ease; 
 
    -webkit-transition:all 0.7s ease; 
 
    -moz-transition:all 0.7s ease; 
 
    -o-transition:all 0.7s ease; 
 
    -ms-transition:all 0.7s ease; 
 
} 
 
.contact_details { 
 
    background: yellow; 
 
    margin-top: 5px; 
 
    width: 230px; 
 
    float: right; 
 
    color: #fff; 
 
    transition:all 0.7s ease; 
 
    -webkit-transition:all 0.7s ease; 
 
    -moz-transition:all 0.7s ease; 
 
    -o-transition:all 0.7s ease; 
 
    -ms-transition:all 0.7s ease; 
 
} 
 
.contact_details p { 
 
    font-size: 14px; 
 
    text-align: center; 
 
} 
 
.contact_details p a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
.nav_bar { 
 
    width: 500px; 
 
    float: right; 
 
    background: orange; 
 
} 
 
.nav_bar ul { 
 
    list-style-type: none; 
 
} 
 
.nav_bar ul li { 
 
    display: inline-block; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
.nav_bar ul li a { 
 
    text-decoration: none; 
 
    padding: 12px; 
 
    margin: 8px; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    position: relative; 
 
} 
 
.nav_bar ul li a::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 0px; 
 
    height: 5px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background: #ff6600; 
 
    transition: width .4s; 
 
} 
 
.nav_bar ul li a:hover::after { 
 
    width: 100%; 
 
} 
 
.container { 
 
    height: 100vh; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    overflow: hidden; 
 
    background-image: url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 
.site-dt { 
 
    background-color: #00d03e; 
 
    height: 573px; 
 
    width: 100%; 
 
} 
 
/*Style after scroll*/ 
 

 
.fixed-nav { 
 
    position: fixed; 
 
    top: 0px 
 
} 
 
.fixed-nav .logo { 
 
    height: 45px; 
 
    width: 127px; 
 
} 
 
.fixed-nav .logo img { 
 
    width: 100% 
 
} 
 
.fixed-nav .contact_details { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
    <div class="top_nav"> 
 
    <div class="logo"> 
 
     <a id="site-logo" href="#"> 
 
     <img src="http://www.robinwhale.co.uk/pages/wisdom/sigs_files/google-logo.jpg" alt="LOGO"> 
 
     </a> 
 
    </div> 
 
    <div class="contact_details"> 
 
     <p>Need Help, Call: 062 445676654 |<a href="#"> Mail</a> 
 
     </p> 
 
    </div> 
 
    <div class="nav_bar"> 
 
     <ul> 
 
     <li><a href="#">Services</a> 
 
     </li> 
 
     <li><a href="#">Solution</a> 
 
     </li> 
 
     <li><a href="#">Support</a> 
 
     </li> 
 
     <li><a href="#">Partners</a> 
 
     </li> 
 
     <li><a href="#">Contacts</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header> 
 
<div class="container"> 
 
</div> 
 
<div class="site-dt"> 
 

 
</div>

は、それはあなたのために、関連のご希望:)

Answer 2

にロゴのdivのクラスnav_bar余白やサイズを変更したい このjQueryのScrollMagic 一部Example

プラグインご覧ください私を作成する自分でTこの

$(function(){ 
 
var shrinkHeader = 300; 
 
    $(window).scroll(function() { 
 
    var scroll = getCurrentScroll(); 
 
     if (scroll >= shrinkHeader) { 
 
      $('.header').addClass('shrink'); 
 
     } 
 
     else { 
 
      $('.header').removeClass('shrink'); 
 
     } 
 
    }); 
 
function getCurrentScroll() { 
 
    return window.pageYOffset || document.documentElement.scrollTop; 
 
    } 
 
});

.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background: gray; 
 
    color:#fff; 
 
    z-index: 1000; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    -webkit-transition: height 0.3s; 
 
    -moz-transition: height 0.3s; 
 
    transition: height 0.3s; 
 
    text-align:center; 
 
    line-height:160px; 
 

 
} 
 
.header.shrink { 
 
    height: 100px; 
 
    line-height:80px; 
 
} 
 
.header h1 
 
{ 
 
    font-size:30px; 
 
    font-weight:normal; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 

 
.header.shrink h1 
 
{ 
 
    font-size:24px; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.content 
 
{ 
 
height:2000px; 
 
/*just to get the page to scroll*/ 
 
}

 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
    </head> 
 
    <body> 
 
    <div class="header"> 
 
     <h1>Animated Fixed Header (Scroll Down)</h1> 
 
    </div> 
 
    <div class="content"> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    </body> 
 
</html>

Answer 3

CSSを見

header { 
    width: 100%; 
    height: 150px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    background-color: #0683c9; 
    -webkit-transition: height 0.3s; 
    -moz-transition: height 0.3s; 
    -ms-transition: height 0.3s; 
    -o-transition: height 0.3s; 
    transition: height 0.3s; 
} 
header h1#logo { 
    display: inline-block; 
    height: 150px; 
    line-height: 150px; 
    float: left; 
    font-family: "Oswald", sans-serif; 
    font-size: 60px; 
    color: white; 
    font-weight: 400; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 
header nav { 
    display: inline-block; 
    float: right; 
} 
header nav a { 
    line-height: 150px; 
    margin-left: 20px; 
    color: #9fdbfc; 
    font-weight: 700; 
    font-size: 18px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 
header nav a:hover { 
    color: white; 
} 
header.smaller { 
    height: 75px; 
} 
header.smaller h1#logo { 
    width: 150px; 
    height: 75px; 
    line-height: 75px; 
    font-size: 30px; 
} 
header.smaller nav a { 
    line-height: 75px; 
} 

@media all and (max-width: 660px) { 
    header h1#logo { 
     display: block; 
     float: none; 
     margin: 0 auto; 
     height: 100px; 
     line-height: 100px; 
     text-align: center; 
    } 
    header nav { 
     display: block; 
     float: none; 
     height: 50px; 
     text-align: center; 
     margin: 0 auto; 
    } 
    header nav a { 
     line-height: 50px; 
     margin: 0 10px; 
    } 
    header.smaller { 
     height: 75px; 
    } 
    header.smaller h1#logo { 
     height: 40px; 
     line-height: 40px; 
     font-size: 30px; 
    } 
    header.smaller nav { 
     height: 35px; 
    } 
    header.smaller nav a { 
     line-height: 35px; 
    } 
} 

HTML

<header> 
    <div class="container clearfix"> 
     <h1 id="logo"> 
      LOGO 
     </h1> 
     <nav> 
      <a href="">Lorem</a> 
      <a href="">Ipsum</a> 
      <a href="">Dolor</a> 
     </nav> 
    </div> 
</header><!-- /header --> 

の

JS

function init() { 
    window.addEventListener('scroll', function(e){ 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 300, 
      header = document.querySelector("header"); 
     if (distanceY > shrinkOn) { 
      classie.add(header,"smaller"); 
     } else { 
      if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     } 
    }); 
} 
window.onload = init(); 

Answer 4

これは完全なコードですが、私はそれがあなた

HTML

<!DOCTYPE html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head> 
<body> 
<div id="menu" class="default"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">CSS</a></li> 
<li><a href="#">Design</a></li> 
<li><a href="#">Development</a></li> 
<li><a href="#">Freebies</a></li> 
<li><a href="#">Inspiration</a></li> 
<li><a href="#">Resources</a></li> 
<li><a href="#">Tutorials</a></li> 
<li><a href="#">WordPress</a></li> 
</ul> 
</div> 
<!-- close menu --> 
<!-- close navi --> 

<div id="content"> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
</div> 
<!-- content --> 

<script type="text/javascript" src="jquery.min.js" charset="utf-8"></script> 
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script> 
<div style="text-align:center;clear:both"> 
<script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-36251023-1']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 

</div> 
</body> 
</html> 

のstyle.css

body { 
background: #efefef; 
margin: 0; 
padding: 0; 
border: none; 
text-align: center; 
font: normal 13px Verdana, sans-serif; 
color: #222; 
} 
#navi { 
height: 50px; 
margin-top: 50px; 
} 
#menu { 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1)); 
background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1); 
border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
line-height: 50px; 
text-align: center; 
margin: 0 auto; 
padding: 0; 
} 
#content { 
width: 750px; 
margin: 0 auto; 
margin-bottom: 25px; 
padding: 30px 0; 
text-align: left; 
} 
ul { 
padding: 0; 
} 
ul li { 
list-style-type: none; 
display: inline; 
margin-right: 15px; 
} 
ul li a { 
color: #fff; 
text-decoration: none; 
text-shadow: 1px 1px 1px #000; 
padding: 3px 7px; 
border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-transition-property: color, background; 
-webkit-transition-duration: 0.5s, 0.5s; 
} 
ul li a:hover { 
background: #01458e; 
color: #ff0; 
-webkit-transition-property: color, background; 
-webkit-transition-duration: 0.5s, 0.5s; 
} 
.default { 
width: 850px; 
height: 50px; 
box-shadow: 0 5px 20px #888; 
-webkit-box-shadow: 0 5px 20px #888; 
-moz-box-shadow: 0 5px 20px #888; 
} 
.fixed { 
position: fixed; 
top: -5px; 
left: 0; 
width: 100%; 
box-shadow: 0 0 40px #222; 
-webkit-box-shadow: 0 0 40px #222; 
-moz-box-shadow: 0 0 40px #222; 
} 

0123役立つことを願っています

しつこい-menu.js

$(function(){ 

    var menu = $('#menu'), 
     pos = menu.offset(); 

     $(window).scroll(function(){ 
      if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){ 
       menu.fadeOut('fast', function(){ 
        $(this).removeClass('default').addClass('fixed').fadeIn('fast'); 
       }); 
      } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ 
       menu.fadeOut('fast', function(){ 
        $(this).removeClass('fixed').addClass('default').fadeIn('fast'); 
       }); 
      } 
     }); 

}); 

私はscrollTop()位置は0とシンプル削除追加されたクラス、次に大きいときは、.top_navクラスにクラス.fixed-navを追加する必要があるすべての問題