jQuery: добавить класс CSS в пункт меню, основываясь на позиции прокрутки браузера - PullRequest
Новая
       18

jQuery: добавить класс CSS в пункт меню, основываясь на позиции прокрутки браузера

2 голосов
/ 24 апреля 2010

У меня есть меню: 

  <ul class="menu-bottom">
  <li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li>
   <li id="m2"><a id="2" href="#"><span>Link 2</span></a></li>
   <li id="m3"><a id="3" href="#"><span>Link 3</span></a></li>
</ul>

Я хочу, чтобы в зависимости от позиции прокрутки браузера класс "active" соответствовал правильному элементу .

Вот как я это вижу: 

     if ($(document).height() == 500) {
$('#m1').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1000) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1500) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

Я не очень знаком со свойствами jQuery Dimensions, поэтому этот код не имеет особого смысла, но я надеюсь, что вы поняли идею.

Если бы кто-то мог сказать мне, как заставить это работать, это было бы действительно здорово.

Спасибо:)

1 Ответ

11 голосов
/ 24 апреля 2010

Не совсем понятно, что вы пытаетесь сделать, но я попробую. Чтобы получить сумму, которую окно прокручивало по вертикали, вы должны использовать функцию jQuery scrollTop(). Функция height() дает вам высоту в пикселях элемента, для которого она вызывается, поэтому она не будет очень полезной, если вы хотите использовать значение прокрутки. Что-то вроде этого может быть ближе к тому, что вам нужно: 

// bind a function to the window's scroll event, this will update
// the 'active' class every time the user scrolls the window
$(window).scroll(function() {    
    // find the li with class 'active' and remove it
    $("ul.menu-bottom li.active").removeClass("active");
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct li based on the scroll amount
    if (scroll <= 500) {
        $("#m1").addClass("active");
    }
    else if (scroll <= 1000) {
        $("#m2").addClass("active");
    }
    else {
        $("#m3").addClass("active");
    }
}

Даже если вышеупомянутое не на верном пути, есть еще пара моментов, которые могут помочь. Такие строки, как $('#m1').parent().addClass('active').siblings().removeClass('active');, скорее всего, не соответствуют вашим ожиданиям. Вместо того, чтобы добавлять «активный» класс в li и затем удалять его из братьев и сестер li, он фактически добавляет класс в родительский ul и удаляет его из братьев и сестер ul. Попробуйте удалить .parent() из каждой строки, и это должно сработать.

Кроме того, поскольку вы используете == в своих условиях if, класс будет добавлен только тогда, когда значение равно 500 или 1000 и т. Д. Я сомневаюсь, что вы намерены. Вот почему в приведенном выше коде я изменил его на <= для условных операторов. </p>

Надеюсь, это поможет.

...