Как поменять классы на jquery
Доброго времени суток друзья! Я полнейший нулевой новичок в jquery.
Прошу подсказки. Собственно в двух словах: При скролинге выезжает сверху меню и остаётся там в position:fixed. Всё работает, но не могу понять, как сделать так, чтобы уменьшить размеры меню. Я имею в виду, что в .default высота 100px и размеры шрифта и остальных элементов соответствующие. Но при скролинге, хочу высоту 50px, это работает, но как уменьшить в размере все элементы - не могу понять. В этом и состоит вопрос!!! Вот код:
<script type="text/javascript">
$(document).ready(function(){
var $menu = $("#header");
$(window).scroll(function(){
if ( $(this).scrollTop() > 180 && $menu.hasClass("default") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("default logo social")
.addClass("fixed logo-min social-min")
.slideDown('normal');
});
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed logo-min social-min")
.addClass("default")
.fadeIn('fast');
});
}
});
});
</script>
Html:
<div id="header" class="default">
<div class="menu-social">
<div class="social">
<span class="fb"><a href="#" target="_blank" title="Добавляйся в Фейсбук"></a></span>
<span class="twitter"><a href="#" target="_blank" title="Добавляйся в Твиттер"></a></span>
<span class="g_plus"><a href="#" tabindex="_blank" title="Добавляйся в Гугл+"></a></span>
</div>
<ul class="menu">
<li><a class="active" href="#">Главная</li> </a>
<li><a href="#">Блог</li> </a>
<li><a href="#">О сайте</li> </a>
</ul>
<a class="logo" href="#"><strong>Make-Together</strong>.ru</br><p>Aenean commodo ligula eget dolor. Aenean massa.</p></a>
</div>
</div>
Ну и css: Код:
#header { |
fa_t,
попробуйте настроить css а не скрипт ... ниже код для примера там в css много лишнего ... но основное это два класса default и fixed остальные элементы и классы внутри них -- меняются только эти два класса -- изучите html -- строки 62 - 64 и сравните со своими.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">body{height:1500px}
#header{overflow:hidden}
.default .social{background:#319f9b;width:130px;height:50px;border-radius:0 0 5px 5px;float:right}
.social span a{float:left;width:32px;height:32px;margin:8px 3px 5px 7px}
.fb a{background:url(images/fb2.png)}
.twitter a{background:url(images/twtt.png)}
.g_plus a{background:url(images/g+.png)}
.fixed .social{ display: none;}
.default .menu{clear:right;float:right;margin-top:15px}
.menu li{float:left;font-size:14px;margin-right:5px;text-transform:uppercase;width:100px;text-align:center}
.menu li a{text-decoration:none;color:#555;text-shadow:0 1px 0 #f3f3f3;display:block;transition:.5s}
.menu li a:hover,.menu li a:active,.menu .active{color:#319f9b;border-bottom:2px solid #319f9b}
.menu-social{width:50%;margin:0 auto;padding:0 50px}
.fixed .menu{float:right;margin-top:15px}
.fixed .menu li a{font-size:12px;}
.default{width:100%;height:100px;margin:0px;background:#fff;border-bottom:1px solid #d9d9d9}
.fixed{position:fixed;top:0px;left:0px;z-index:999;width:100%;background:#fff;border-bottom:1px solid #d9d9d9;height:50px}
.default .logo{float:left;font-size:32px;line-height:1.2;color:#000;display:block}
.default .logo strong{font-weight:bold;font-size:38px;color:#515252}
.default .logo p{font-size:14px;text-shadow:0 1px 0 #f3f3f3;text-shadow:none;color:#555}
a.logo:hover{text-decoration:none;color:#aaa}
.fixed .logo strong{font-weight:normal;font-size:26px}
.fixed .logo p{font-size:10px;color:#555; margin: 0px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $menu = $("#header");
$(window).scroll(function(){
if ( $(this).scrollTop() > 180 && $menu.hasClass("default") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("default")
.addClass("fixed")
.slideDown('normal');
});
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed")
.addClass("default")
.fadeIn('fast');
});
}
});
});
</script>
</head>
<body>
<div id="header" class="default">
<ul class="menu">
<li><a class="active" href="#">Главная</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">О сайте</a></li>
</ul>
<a class="logo" href="#"><strong>Make-Together</strong>.ru</br><p>Aenean commodo ligula eget dolor. Aenean massa.</p></a>
</div>
</body>
</html>
|
Блин, точно) А сижу голову ломаю!!!
Большое спасибо за подсказку, всё работает так как и хотел:dance: |
| Часовой пояс GMT +3, время: 08:03. |