Доброго времени суток друзья! Я полнейший нулевой новичок в 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 {
overflow: hidden;
}
.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);
}
.social-min {
background: #fff; height: 0px; width: 0px; margin:0;
}
.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 {
color:#319f9b; border-bottom: 2px solid #319f9b;
}
.menu li a:active {
color: #319f9b; border-bottom: 2px solid #319f9b;
}
.menu .active {
color:#319f9b; border-bottom: 2px solid #319f9b;
}
.menu-social {
width: 1351px; margin: 0 auto; padding: 0 50px;
}
.default {
width: 1351px; height: 100px; margin: 0 auto; 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: 100px;
}
.logo {
float: left; font-size: 32px; line-height: 1.2; color:#000; margin-top: -30px; display: block;
}
.logo strong {
font-weight: bold; font-size: 38px; color: #515252;
}
.logo p {
font-size: 14px; text-shadow: 0 1px 0 #f3f3f3; text-shadow:none; color: #555;
}
a.logo:hover {
text-decoration: none; color: #aaa;
}
.logo-min {
font-size: 26px; display: block;
}
.logo-min strong {
font-weight: normal; font-size: 32px;
}
.logo-min p {
font-size: 10px; color: #555;
} |
P.S. Скрипт нашёл на просторах интернета, интуитивно понимаю как он работает, но как правильно всё сделать, не пойму. Насколько я понял, removeClass - удаляет класс, а addClass - добавляет. То есть, удалил + добавил = поменять? В css описываю 2 варианта классов, но не работает
