Уменьшение полосы навигации при прокрутке вниз (bootstrap3)

Ответ 1

Sticky navbar:

Чтобы сделать липкий навигатор, вам нужно добавить класс navbar-fixed-top к вашему nav

Официальная документация:
http://getbootstrap.com/components/#navbar-fixed-top

Официальный пример:
http://getbootstrap.com/examples/navbar-fixed-top/

Простой пример кода:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

со связанными jsfiddle: http://jsfiddle.net/ur7t8/

Изменение размера навигационной панели:

Если вы хотите изменить навигационную панель при прокрутке страницы, вы можете взглянуть на этот пример: http://www.bootply.com/109943

JS

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS

nav.navbar.shrink {
  min-height: 35px;
}

Анимация:

Чтобы добавить анимацию во время прокрутки, все, что вам нужно сделать, это установить переход на nav

CSS

nav.navbar{
  background-color:#ccc;
   // Animation
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

Я сделал jsfiddle с полным примером кода: http://jsfiddle.net/Filo/m7yww8oa/

Ответ 2

toggleClass тоже работает:

$(window).on("scroll", function() {
    $("nav").toggleClass("shrink", $(this).scrollTop() > 50)
});

Ответ 3

Вы можете комбинировать "прокрутку" и "scrollstop" для достижения желаемого результата:

$(window).on("scroll",function(){
   $('nav').addClass('shrink');
}); 
$(window).on("scrollstop",function(){
   $('nav').removeClass('shrink');
}); 

Ответ 4

Если вы используете AngularJS, и используете Angular Bootstrap: https://angular-ui.github.io/bootstrap/

Вы можете сделать это так приятно, как это:

HTML:

<nav id="header-navbar" class="navbar navbar-default" ng-class="{'navbar-fixed-top':scrollDown}" role="navigation" scroll-nav>
    <div class="container-fluid top-header">
        <!--- Rest of code --->
    </div>
</nav>

CSS: (Обратите внимание, что я использую отступы как более мощные навигация для сжатия без дополнения, которые вы можете изменить, как хотите)

nav.navbar {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;

  background-color: white;
  margin-bottom: 0;
  padding: 25px;
}

.navbar-fixed-top {
  padding: 0;
}

И затем добавьте свою директиву

Директива: (Обратите внимание, что вам может потребоваться изменить this.pageYOffset >= 50 от 50 до более или менее, чтобы удовлетворить ваши потребности)

angular.module('app')
.directive('scrollNav', function ($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function() {
      if (this.pageYOffset >= 50) {
        scope.scrollDown = true;
      } else {
        scope.scrollDown = false;
      }
      scope.$apply();
    });
  };
});

Это сделает работу красиво, анимированной и крутой.

Ответ 5

Для тех, кто не хочет использовать jQuery, здесь используется метод Vanilla Javascript, который делает то же самое с помощью classList:

function runOnScroll() {
    var element = document.getElementsByTagName('nav')  ;
    if(document.body.scrollTop >= 50) {
        element[0].classList.add('shrink')
    } else {
        element[0].classList.remove('shrink')
    }
    console.log(topMenu[0].classList)

};

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

Ответ 6

Я использую этот код для своего проекта

$(window).scroll ( function() {
    if ($(document).scrollTop() > 50) {
        document.getElementById('your-div').style.height = '100px'; //For eg
    } else {
        document.getElementById('your-div').style.height = '150px';
    }    
}
);

Вероятно, это поможет