Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2014, 20:26
Новичок на форуме
Отправить личное сообщение для fa_t Посмотреть профиль Найти все сообщения от fa_t
 
Регистрация: 31.05.2014
Сообщений: 2

Как поменять классы на 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 {
	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 варианта классов, но не работает
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2014, 21:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 31.05.2014, 22:57
Новичок на форуме
Отправить личное сообщение для fa_t Посмотреть профиль Найти все сообщения от fa_t
 
Регистрация: 31.05.2014
Сообщений: 2

Блин, точно) А сижу голову ломаю!!!

Большое спасибо за подсказку, всё работает так как и хотел
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ребята помогите правильно реализовать цепочки функций как в jquery mrgordon Общие вопросы Javascript 6 04.06.2012 20:40
Как поменять frame у компонента grid? khusamov ExtJS 5 14.05.2012 19:57
Как правильно подключать jQuery? Hurray jQuery 2 26.04.2012 13:03
JQUERY - как скачать данную библиотеку? Golovastik jQuery 7 06.03.2011 18:03
Как правильно подгрузить jQuery Siton jQuery 4 15.06.2009 09:54