Как сжать меню навигации при прокрутке вниз? - PullRequest
Новая
       12

Как сжать меню навигации при прокрутке вниз?

9 голосов
/ 16 июля 2011

Для нового сайта, который я разрабатываю, я бы хотел уменьшить меню навигации, когда пользователь прокручивает страницу вниз.

Что-то похожее на то, что вы видите на сайте IBM: http://www.ibm.com/us/en/

Я не смог найти какую-либо реализацию jQuery или учебное пособие (я уверен, что я должен искать неправильные ключевые слова)

Так что, если кто-то может указать мне правильное направление, это сделает меня действительно счастливым.

Заранее спасибо!

Ответы [ 3 ]

37 голосов
/ 16 июля 2011

Вот, пожалуйста, человек: 

$(function(){
  var navStatesInPixelHeight = [40,100];

  var changeNavState = function(nav, newStateIndex) {
    nav.data('state', newStateIndex).stop().animate({
      height : navStatesInPixelHeight[newStateIndex] + 'px'
    }, 600);    
  };

  var boolToStateIndex = function(bool) {
    return bool * 1;    
  };

  var maybeChangeNavState = function(nav, condState) {
    var navState = nav.data('state');
    if (navState === condState) {
      changeNavState(nav, boolToStateIndex(!navState));
    }
  };

  $('#header_nav').data('state', 1);

  $(window).scroll(function(){
    var $nav = $('#header_nav');

    if ($(document).scrollTop() > 0) {
      maybeChangeNavState($nav, 1);
    } else {
      maybeChangeNavState($nav, 0); 
    }
  });
});

Демо: http://jsfiddle.net/seancannon/npdqa9ua/

4 голосов
/ 16 июля 2011

Что вы делаете, это проверяете значение прокрутки окна.Если оно больше нуля, пользователь прокрутил вниз.Если так, то спрячьте баннер (или уменьшите или что-то еще).Если они вернутся наверх, то покажите его заново.

http://jsfiddle.net/rxXkE/

$(window).scroll(function () { 
console.log($(window).scrollTop());
if ($(window).scrollTop() > 0) {
    $(".banner").slideUp();
}
else {
     $(".banner").slideDown();   
}

});

1 голос
/ 22 октября 2013

Это уменьшает и увеличивает панель навигации по мере прокрутки пользователем.Создано это из http://www.kriesi.at/themes/enfold/ панели навигации.Версия, которую я создал, работает почти так же.https://github.com/Jlshulman/Elastic-Bar

...