Как убрать мерцание при transition?

Question

[angelzzz]

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

<header>
      <div id="navigation">
        <nav class="navbar navbar-default">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><img class="logo" src="/images/logo.png"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">test3<span class="sr-only">(current)</span></a></li>
                <li><a href="#">test2</a></li>
                <li><a href="#">test1</a></li>
                <p class="navbar-text phone-number">[phone]</p>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
      <!--navbar-->
    </header>

<script>
      $(window).scroll(function() {
          if ($(this).scrollTop() > 1){  
              $('header').addClass("sticky");
              $('header .logo').addClass("sticky");
              $('header .navbar-right').addClass("sticky");
          }
          else{
              $('header').removeClass("sticky");
              $('header .logo').removeClass("sticky");     
              $('header .navbar-right').removeClass("sticky");            
          }
      });
    </script>

.logo, .navbar-right, .navbar {
	-webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
     -moz-transition: all 0.4s linear;
     -o-transition: all 0.4s linear;  	
}    
header {
	-webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
     -moz-transition: all 0.4s linear;
     -o-transition: all 0.4s linear;  
    z-index: 1;
}
header.sticky {
    position: fixed;
    width: 100%;
    z-index: 1;    
}

Как сделать плавным этот процесс, как например в этом примере demo.qodeinteractive.com/bridge3 ?

Comments

[Евгений Петров]

Когда вы уже научитесь делать страницы на jsfiddle.net?

Answer 1

[Роман]

У вас стоит transition для всех параметров (all), тем самым когда хедер переходит в фиксированное положение он выпадает из потока. Считайте его высота = 0%. Если убрать транзишн - то вы не увидите этого эффекта, а вот с ним - шапка пропадает. В тразинше необходимо прописать только те свойства, которые вы хотите изменять - ширину, маргины.

Comments

[angelzzz]

спасибо! помогло поменять all на конкретные значения

Answer 2

[Александр Зачиналов]

Я бы еще отсечку прописал, чтобы зря JS не гонять

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){
        if (!$('header').hasClass("sticky")) {
        $('header').addClass("sticky");
        $('header .logo').addClass("sticky");
        $('header .navbar-right').addClass("sticky");
        }
    }
    else{
        $('header').removeClass("sticky");
        $('header .logo').removeClass("sticky");     
        $('header .navbar-right').removeClass("sticky");            
    }
});

тогда, возможно, и transition один раз проидет, без наложения.

P.S. не повторяйте свойство z-index для смежных классов (header и header.sticky как пример), не забывайте, что через transition можно менять не все свойства CSS список возможных

Comments

[angelzzz]

помогло предыдущее решение, но на всякий случай и ваш код добавил :)