А ручками создать позицию оформить стиль и добавлять всё что угодно.
Из вариантов могу предложить классную штуку:
под спойлером)
Предупреждение: Помехи! Код: |
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Lynx_Lynx" />
<title>Прилипающее к верху меню</title>
<s-----cript type="text/javas-----cript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></s-----cript>
<style>
/*demo page style*/
body {background: #f0f0f0;}
h1{
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
margin:0; padding:0;
}
p {line-height:1.5em; padding-bottom:1em;}
#wrapper {
width:920px;
margin:0 auto;
padding: 0;
}
#header {height: 150px;}
#logo {height: 100px;}
/*main menu*/
#menu {
text-transform: uppercase;
text-align: center;
line-height: 50px;
background: #69c;
text-shadow:0 1px 1px black;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#menu ul {padding:0; margin:0;}
#menu li{
display: inline;
list-style:none;
margin: 5px 10px;
}
#menu li a {
padding:5px 10px;
color:#fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu li a:hover{
background: #36c;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width:920px;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;
-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}
</style>
<s-------cript type="text/javas----cript">
jQuery(document).ready(function(){
var jQuerymenu = jQuery("#menu");
jQuery(window).scroll(function(){
if ( jQuery(this).scrollTop() > 100 && jQuerymenu.hasClass("default") ){
jQuerymenu.fadeOut('fast',function(){
jQuery(this).removeClass("default")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if(jQuery(this).scrollTop() <= 100 && jQuerymenu.hasClass("fixed")) {
jQuerymenu.fadeOut('fast',function(){
jQuery(this).removeClass("fixed transbg")
.addClass("default")
.fadeIn('fast');
});
}
});//scroll
jQuerymenu.hover(
function(){
if( jQuery(this).hasClass('fixed') ){
jQuery(this).removeClass('transbg');
}
},
function(){
if( jQuery(this).hasClass('fixed') ){
jQuery(this).addClass('transbg');
}
});//hover
});//jQuery
</s-----cript>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1>Webcomplex</h1>
</div>
<div id="menu" class="default">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Joolma</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">HTML5&CSS3</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</div>
<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 a
ute 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>
</div>
</body>
</html>
|
--- данный код можно вставить в пустой файл html, сохранить и посмотреть что получается (предварительно убрать "-" <s-------cript type="text/javas-----cript"> )
- вот реализовывал на сайте
skmusic---kiev----ua/
var jQuerymenu = jQuery("#menu"); ---- данная строка находится сверху после стиля, #menu - id нашего модуля, который будет фиксироваться. Меняем значение "menu" в данном коде на id нашего модуля. (в шести местах)
Вот ещё вариант реализации как у yandex
дави на мну я ссылка!