Подставить или изменить класс в блоке с помощью JQuery

JQuery плотно входит в разработку сайтов, я все чаще и чаще стал внедряю в своих проектах эту JavaScript библиотеку. Часто использую установку класса по клику и изменение при прокрутке страницы. Оба способа рассмотрим в данной заметке.

Изменение класс при прокрутке страницы

var $menu = $("#menu");
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("container-menu") ){
$menu.removeClass("container-menu").addClass("menu-scroll");
} else if($(this).scrollTop() <= 100 && $menu.hasClass("menu-scroll")) {
$menu.removeClass("menu-scroll").addClass("container-menu");
}
});Этот скрипт состоит из условия, получаем значение отступа прокрутки сверху, если оно больше 100 пикселей то ищем в блоке с идентификатором «menu» класс «container-menu», удаляем его, и вместо него подставляем «menu-scroll», это если Вы скролите вниз. А если же отступ сверху меньше или равен 100 пикселей, то уже ищем и удаляем «menu-scroll» и подставляем обратно «container-menu», это если Вы уже скролите вверх. В классе «menu-scroll» хранятся стили такие же как в «menu» за исключением значений которые вы хотите изменить при скролинге. Часто используется такой прием для фиксации меню при прокрутки сайта.

Пример меню №1<div id="menu" class="container-menu">
<ul>
<li>Главная</li>
<li>Второстепенная</li>
<li>Контакты</li>
</ul>
</div>

Установка класса по клику

Назначение этого скрипта многоцелевое, его можно использовать как и в меню, так и для отдельных блоков, в общем ограничитель только ваша фантазия)).
$(function() {
$("#activmenu ul li a").click(function(e) {
e.preventDefault();
$("#activmenu ul li a").removeClass('active');
$(this).addClass('active');
})
});
Здесь же срабатывание скрипта происходит по клику на тег «a», то есть нажимая на ссылку скрипт подставляет к ней класс «active». Чтоб данный пример заработал, нужен div с идентификатором activmenu, в котором есть неупорядоченный список с ссылками.

Пример меню №2<div id="activmenu">
<ul>
<li><a href='' class="active">1</a></li>
<li><a href=''>2</a></li>
<li><a href=''>3</a></li>
</ul>
</div>
Как то так все это происходит, если кому то что то не понятно, пишите, помогу чем смогу, заметка не идеальна)).