Вкладки меню при анимации при прокрутке вверху div

Я пытаюсь сделать этот навигатор: http://greektourguide.gr/. При прокрутке вниз до определенного div (с определенным идентификатором) текущая вкладка меняет класс, чтобы показать, в каком разделе вы находитесь.Вкладки меню при анимации при прокрутке вверху div

Если возможно, я хотел бы использовать jQuery, который просто меняет класс текущего div. Анимации будут выполняться с помощью CSS-переходов.

Спасибо за помощь;)

EDIT

Я гнал решение ниже. Моя функция .scrollTop() не работала. Теперь работает благодаря Мохамеду-Юсефу. Удачи;)

EDIT

Наконец, решение еще не работает ... Так что я отправил новое решение, помеченное как ответ;)

источник

2015-05-05 lolgab123

http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px посмотрите на это .. для конкретного использования div $ ('your_div') .offset(). Top –

Могли бы вы пожалуйста, дайте контекстный пример? Я попытался включить его, но кажется, что моя функция .scrollTop() не работает ... Нужен ли мне специальный плагин? – lolgab123

http://jsfiddle.net/ZyKar/2074/ этот пример, чтобы вы знали, как использовать прокрутку .. не забудьте включить jquery-библиотеку в свой HTML-код .. удачи –

UPDATE

Я обновил ответ здесь, так что он может действительно работает!

HTML

Нам нужны некоторые основные правила HTML для работы с

Навигация вкладках JQuery (с использованием списка или таблицы, не имеет значения)
Некоторые разделы (Маркировки ID)
Якоря во вкладках, которые ссылаются на идентификаторы разделов

пример:

<!DOCTYPE html> 
<html> 

<body id="#top"> 

    <nav> 
     <ul> 
      <li><a href="#top">Home</a></li> 
      <li><a href="#web">Web</a></li> 
      <li><a href="#design">Design</a></li> 
      <li><a href="#photo">Photo</a></li> 
     </ul> 
    </nav> 

    <header><h2>HEADER</h2></header> 

    <section id="web"><h2>WEB</h2></section> 
    <section id="design"><h2>DESIGN</h2></section> 
    <section id="photo"><h2>PHOTO</h2></section> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

</body> 

</html>

JQuery

Это JQuery скрипт будет прекрасно работать с относительными высотами сечения.Для этого нам нужно:

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

пример:

var currentTab = (function() { 


    //variables 
    var $window = $(window), 
     $section = $('section'), 
     $scrollPosition = $window.scrollTop(), 
     $sectionHeights = []; 


    //will calculate each section heights and store them in sectionHeights[] array 
    function resizeSectionHeights() { 

     $section.each(function (i) { 
      $sectionHeights[i] = $(this).outerHeight(); 
     }); 

    } 


    /*will calculate current scroll position. If it's between the top and bottom of a section, 
     the tab containing an href value of that section id will have the .current class.*/ 
    function applyCurrentState() { 

     $scrollPosition = $window.scrollTop(); 

     $section.each(function (i) { //we indent i at each section count, so we can find it's height in sectionHeight[] 

      var $anchor = $("nav a[href=#" + $(this).attr('id') + "]"), 
       $sectionTop = $(this).offset().top - 1,     // -1 get rid of calculation errors 
       $sectionBottom = $sectionTop + $sectionHeights[i] - 1; // -1 get rid of calculation errors 

      if ($scrollPosition >= $sectionTop && $scrollPosition < $sectionBottom) { 

       $anchor.addClass('current'); 

      } else { 

       $anchor.removeClass('current'); 
      } 
     }); 
    } 


    //binding events 
    $window.resize(resizeSectionHeights); 
    $window.scroll(applyCurrentState); 


    //initialization 
    resizeSectionHeights(); 

}());

CSS

Для CSS, просто изменить стиль nav a.current так мы замечаем, что мы в данном конкретном разделе.

FINAL

Чтобы увидеть конечный продукт, пожалуйста, проверьте THIS JSFIDDLE.

источник

2016-01-23 16:30:54 lolgab123

Благодаря Mohamed-Юсеф, что делает мой. Функция scrollTop() работает по какой-то причине, я наконец нашел решение.

HTML

...somecode... 
<nav> 
    <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="#web">Web</a></li> 
     <li><a href="#coding">Coding</a></li> 
     <li><a href="#photo">Photo</a></li> 
     <li><a href="#more">More</a></li> 
    </ul> 
</nav> 
...somecode... 
<section id="about">bla bla bla long height don't start at top of page...'</section> 
<section id="web">same</section> 
<section id="coding">same</section> 
<section id="photo">same</section> 
<section id="more">same</section>

CSS

nav ul li a 
{ 
    display: block; 
    height: 40px; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    line-height: 40px; 
    border-bottom: solid 3px rgba(231, 76, 60, 0); 
    color: #484848; 
    transition: all 0.3s; 
} 

nav ul li a.current 
{ 
    height: 37px; 
    border-bottom: solid 3px rgba(231, 76, 60, 1); 
    transition: all 0.3s; 
}

Javascript (JQuery)

$(window).scroll(function() 
{ 
    var windowscroll = $(this).scrollTop(); 
    $('section').each(function() 
    { 
     if($(this).offset().top < windowscroll) 
     { 
      $("nav ul li a[href=#" + $(this).attr('id') + "]").addClass('current'); 
     } 
     else 
     { 
      $('nav ul li a').removeClass(); 
     } 
    }); 
});

Там мы идем! Теперь у вас есть плавная анимация вкладок, когда страница находится в определенном важном разделе (или div, если вы не используете HTML5) на странице. Повеселись!

источник

2015-05-07 18:58:28 lolgab123

рад слышать это .. Много удачи вам :) +1 –

Омг, спасибо за это! Я не знаю, какой уровень удачи я получил здесь, но я искал ТОЧНЫЙ пример сайта! Еще раз спасибо! – lolgab123

Неужели я такой глупый? Я просто понял, что я тот, кто на самом деле ответил на этот вопрос ... – lolgab123

Вкладки меню при анимации при прокрутке вверху div

ответ

Смежные вопросы