Добавление CSS-класса на основе позиции прокрутки браузера с помощью jQuery - в поисках более модульного подхода

Question

Добавление CSS-класса на основе позиции прокрутки браузера с помощью jQuery - в поисках более модульного подхода

0

На моем текущем сайте (uptrde.com) у меня есть настройка, когда вы переходите к определенному разделу страницы, который загорается навигатор, соответствующий этому разделу. Тем не менее, я чувствую, что то, как я делаю это с jQuery, сложно, а не модульно. Мой код для анимации прокрутки страницы отлично работает, только этот последний бит дает мне проблемы. Я хотел бы сделать этот код более модульным, поэтому, если в будущем я добавлю несколько разделов на сайт, мне не придется вычислять новые значения. Спасибо за помощь.

$(window).scroll(function() {    
  $(".mainNav a").removeClass("selected");
     var scroll = $(window).scrollTop();
     //add the 'selected' class to the correct id element based on the scroll amount
     if (scroll >= 0 && scroll <= 855) { 
       $("#homeNav").addClass("selected"); 
         } else if (scroll >= 855 && scroll <= 1808) {
             $("#aboutNav").addClass("selected");
               } else if (scroll >= 1808 && scroll <= 2700) {
                 $("#sampleNav").addClass("selected");
                   } else if (scroll >= 2700 && scroll <= 3780){
                     $("#clientsNav").addClass("selected");
                       } else {
                         $("#contactNav").addClass("selected");
                       }
});

<nav id="menu">
  <ul class="mainNav">
    <li><a href="#top" id="homeNav" class="selected">Home</a></li>
    <li><a href="#about-header" id="aboutNav">About Us</a></li>
    <li><a href="#samples-header" id="sampleNav">Samples</a></li>
    <li><a href="#clients-header" id="clientsNav">Clients</a></li>
    <li><a href="#contact-header" id="contactNav">Contact</a></li>
   </ul>
</nav>

Travo100 15 май 2014, в 05:43

Источник

0

Один из этих ответов решил вашу проблему? Пожалуйста, примите ответ, если ваша проблема решена. В противном случае, дайте нам знать, как еще мы можем помочь.
codescribblr 01 июнь 2014, в 20:53

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Один из этих ответов решил вашу проблему? Пожалуйста, примите ответ, если ваша проблема решена. В противном случае, дайте нам знать, как еще мы можем помочь.

codescribblr · Answer 1 · 2014-05-15T02-12-00.000Z

Вот что я бы рекомендовал. Прокрутите каждый из разделов на странице и получите высоту рендеринга. Добавьте каждую из этих высот в массив, а затем пропустите массив, когда вы добавляете классы. Что-то вроде этого:

$(window).scroll(function(){
     var scroll = $(window).scrollTop();
     var section_height = new Array();
     var section_position = new Array();
    $('.main-container').children().each(function(){
        section_height.push($(this).height());
        section_position.push($(this).offset().top);
    });

    for(i=0; i<section_position.length; i++){
        if($(window).scrollTop() > section_position[i] - (section_height[i] / 4)){
            $('.mainNav li').not(':nth-child('+i+')').find('a').removeClass('selected');
            $('.mainNav li:nth-child('+i+') a').addClass('selected');
        } else {
            $('.mainNav li:nth-child('+i+') a').removeClass('selected');
        }
    }
});

Я не тестировал это на вашем сайте, но сегодня я использовал тот же код на другом сайте, и он работал как шарм. Вы хотите играть с вычислением, используемым в инструкции if в цикле for. Я должен изменить его в следующем разделе, когда вы находитесь на расстоянии 1/4 от него. Другими словами, я хотел, чтобы он изменился на следующий элемент навигации, когда вы были "почти" в нем в позиции прокрутки. Я не хотел ждать, пока все это будет в верхней части экрана, прежде чем менять выделенный элемент nav. Вы, однако, можете сделать это по-другому.

arvic.rivera · Answer 2 · 2014-05-15T01-39-00.000Z

возможно, это может помочь вам

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop() + 90;
        var currentArea = $('.area').filter(function() {
            return scroll <= $(this).offset().top + $(this).height();
        });
        $('nav a').removeClass('selected');
        $('nav a[href=#' + currentArea.attr('id') +']').addClass('selected');
        //console.debug('nav a[href=#' + currentArea.attr('id') +']');
    });
});

JSFiddle: http://jsfiddle.net/LGzxq/1/