дёргается навбар при прокрутке

22 сентября 2019, 00:20

есть страница с навбаром, который с помощью JS уменьшается при прокрутке вниз, при этом всегда оставаясь вверху (position: sticky). если быстро и сильно прокручивать всё работает правильно, если же прокрутить немного, то навбар начинает дёргатся вверх-вниз как аццкий сотона, в примере ниже видно. есть идеи как исправить?

я вообще понимаю, что это из-за того самого position: sticky, так как если поставить fixed, то скроллится нормально, только вот fixed не работает с flexbox.

navbar_scroll(); 
 
function navbar_scroll() { 
  $(window).scroll(function() { 
    if ($(document).scrollTop() > 30) { 
      $('nav').css('height', '50px'); 
      $('[id=nav-link]').css('padding', '15px 20px'); 
      $('[id=nav-icon]').css('padding', '15px 10px'); 
    } else { 
      $('nav').css('height', '160px'); 
      $('[id=nav-link]').css('padding', '71px 20px'); 
      $('[id=nav-icon]').css('padding', '71px 10px'); 
    } 
  }); 
}

body { 
  margin: 0; 
} 
 
nav { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  height: 160px; 
  position: -webkit-sticky; 
  position: sticky; 
  top: 0; 
  -webkit-transition: all .4s ease; 
  transition: all .4s ease; 
  background: white; 
} 
 
nav .nav-section-logo { 
  margin-left: 60px; 
} 
 
nav .nav-section-link { 
  margin-right: 60px; 
} 
 
nav .nav-link { 
  font-size: 17px; 
  font-family: 'Major Mono Display', monospace; 
  padding: 71px 20px; 
  text-decoration: none; 
  color: black; 
  font-weight: bolder; 
  -webkit-transition: all .2s ease; 
  transition: all .2s ease; 
} 
 
nav .nav-link:hover { 
  color: coral; 
} 
 
nav .nav-icon { 
  padding: 71px 10px; 
} 
 
p.lorem { 
  padding: 600px 0; 
  background-color: #323232; 
  margin: 0 60px 20px; 
}

<nav class="nav"> 
  <div class="nav-section-logo"> 
    <a href="#" id="nav-link" class="nav-link">logo</a> 
  </div> 
  <div class="nav-section-link"> 
    <a href="{{ url_for('index') }}" id="nav-link" class="nav-link">Main</a> 
    <a href="#" id="nav-link" class="nav-link">Portfolio</a> 
    <a href="#" id="nav-link" class="nav-link">Photography</a> 
    <a href="#" id="nav-link" class="nav-link">About me</a> 
    <a href="#" id="nav-icon" class="nav-link nav-icon"> 
      <i class="fab fa-instagram fa-lg"></i> 
    </a> 
    <a href="#" id="nav-icon" class="nav-link nav-icon"> 
      <i class="fab fa-facebook fa-lg"></i> 
    </a> 
    <a href="#" id="nav-icon" class="nav-link nav-icon"> 
      <i class="fab fa-github fa-lg"></i> 
    </a> 
  </div> 
</nav> 
 
<p class="lorem">lorem</p> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

navbar_scroll(); 
 
function navbar_scroll() { 
  $(window).scroll(function() { 
    if ($(document).scrollTop() > parseInt($('nav').css('height')) - 20) { 
      $('nav').css('height', '50px'); 
      $('[id=nav-link]').css('padding', '15px 20px'); 
      $('[id=nav-icon]').css('padding', '15px 10px'); 
    } else { 
      $('nav').css('height', '160px'); 
      $('[id=nav-link]').css('padding', '71px 20px'); 
      $('[id=nav-icon]').css('padding', '71px 10px'); 
    } 
  }); 
}

body { 
  margin: 0; 
} 
 
nav { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  height: 160px; 
  position: -webkit-sticky; 
  position: sticky; 
  top: 0; 
  -webkit-transition: all .4s ease; 
  transition: all .4s ease; 
  background: white; 
} 
 
nav .nav-section-logo { 
  margin-left: 60px; 
} 
 
nav .nav-section-link { 
  margin-right: 60px; 
} 
 
nav .nav-link { 
  font-size: 17px; 
  font-family: 'Major Mono Display', monospace; 
  padding: 71px 20px; 
  text-decoration: none; 
  color: black; 
  font-weight: bolder; 
  -webkit-transition: all .2s ease; 
  transition: all .2s ease; 
} 
 
nav .nav-link:hover { 
  color: coral; 
} 
 
nav .nav-icon { 
  padding: 71px 10px; 
} 
 
p.lorem { 
  padding: 600px 0; 
  background-color: #323232; 
  margin: 0 60px 20px; 
}

<nav class="nav"> 
  <div class="nav-section-logo"> 
    <a href="#" id="nav-link" class="nav-link">logo</a> 
  </div> 
  <div class="nav-section-link"> 
    <a href="{{ url_for('index') }}" id="nav-link" class="nav-link">Main</a> 
    <a href="#" id="nav-link" class="nav-link">Portfolio</a> 
    <a href="#" id="nav-link" class="nav-link">Photography</a> 
    <a href="#" id="nav-link" class="nav-link">About me</a> 
    <a href="#" id="nav-icon" class="nav-link nav-icon"> 
      <i class="fab fa-instagram fa-lg"></i> 
    </a> 
    <a href="#" id="nav-icon" class="nav-link nav-icon"> 
      <i class="fab fa-facebook fa-lg"></i> 
    </a> 
    <a href="#" id="nav-icon" class="nav-link nav-icon"> 
      <i class="fab fa-github fa-lg"></i> 
    </a> 
  </div> 
</nav> 
 
<p class="lorem">lorem</p> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>