Заголовок трясся при прокрутке вниз

Question

Примечание: пожалуйста, попробуйте использовать колесико мыши при прокрутке вниз.Также, пожалуйста, будьте добры к колесу мыши.Двигайся медленно.

У меня есть маленький вопрос о прокрутке.Я пытаюсь уменьшить высоту заголовка, когда страница прокручивается вниз, как это делают большинство креативных сайтов.Но в этом случае, когда меня пытались прокрутить с помощью мыши, экран дрожал.Также иногда его делают с прокруткой колесиком мыши.Все файлы добавлены в скрипту js.Пожалуйста, посмотрите на jsfiddle ниже.Я надеюсь, что смогу выразить себя.Заранее спасибо.

$(document).ready(function () {
	$(window).scroll(function () {
    if ($(window).scrollTop() >= 30) {
      $('.header-bottom').addClass('sticky');
      $('.header-bottom').css('line-height','80px');
    } else {
      $('.header-bottom').removeClass('sticky');
      $('.header-bottom').css('line-height','160px');
    }
  });
});

body {
  margin: 0;
}
.header-top {
  line-height:30px;
  background: blue;
}
.header-bottom {
  line-height:160px;
  background: red;
  -webkit-transition: .45s;
  -moz-transition: .45s;
  -ms-transition: .45s;
  -o-transition: .45s;
  transition: .45s;
}
.sticky {
  position: sticky;
  top:0;
  width: 100%;
}

.content {
  margin-top: 20px;
}

.content > div {
  margin-bottom: 100px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="header-top">Content</div>
<div class="header-bottom">Content</div>
<div class="content">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, suscipit consequuntur! Neque modi libero praesentium rerum, pariatur, assumenda obcaecati laudantium officia iste excepturi, molestias quibusdam quae sed nihil laborum.</div>
  <div>Necessitatibus, omnis odit ipsam, repudiandae beatae minima! Voluptates molestias vitae fuga officiis, aperiam earum quas laboriosam cupiditate hic vero reiciendis, numquam corporis, assumenda rem iure expedita animi magnam perferendis delectus.</div>
  <div>Eum odit hic delectus vel facilis nisi cupiditate ad enim recusandae ex, commodi sunt ullam distinctio, architecto quam nulla cumque possimus nihil qui unde magni provident ratione obcaecati fuga. Beatae.</div>
  <div>Iusto repellendus dolore atque architecto consequatur magni nulla animi possimus reiciendis, soluta similique recusandae voluptate reprehenderit, aspernatur repellat ab provident facere magnam sit unde, accusantium explicabo. Ducimus odit aliquid, minima!</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
</div>

Answer 1

Вы добавляете <div class="header">.После header-top и header-bottom перейдите в <div class="header">

и добавьте css;.header { height:190px;}

Если вы используете position:fixed insted position:sticky, это может быть полезно.

Проблема будет решена.

$(document).ready(function () {
	$(window).scroll(function () {
    if ($(window).scrollTop() > 30) {
      $('.header-bottom').addClass('sticky');
    } else {
      $('.header-bottom').removeClass('sticky');
    }
  });
});

body {
  margin: 0;
}
.header {
  height:190px;
}
.header-top {
  line-height:30px;
  background: blue;
}
.header-bottom {
  line-height:160px;
  background: red;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.sticky {
  position: fixed;
  line-height:80px;
  top:0;
  width: 100%;
}

.content {
  margin-top: 20px;
}

.content > div {
  margin-bottom: 100px;
}

.margin {
  margin-top:190px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="header">
  <div class="header-top">Content</div>
  <div class="header-bottom">Content</div>
</div>
<div class="content">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, suscipit consequuntur! Neque modi libero praesentium rerum, pariatur, assumenda obcaecati laudantium officia iste excepturi, molestias quibusdam quae sed nihil laborum.</div>
  <div>Necessitatibus, omnis odit ipsam, repudiandae beatae minima! Voluptates molestias vitae fuga officiis, aperiam earum quas laboriosam cupiditate hic vero reiciendis, numquam corporis, assumenda rem iure expedita animi magnam perferendis delectus.</div>
  <div>Eum odit hic delectus vel facilis nisi cupiditate ad enim recusandae ex, commodi sunt ullam distinctio, architecto quam nulla cumque possimus nihil qui unde magni provident ratione obcaecati fuga. Beatae.</div>
  <div>Iusto repellendus dolore atque architecto consequatur magni nulla animi possimus reiciendis, soluta similique recusandae voluptate reprehenderit, aspernatur repellat ab provident facere magnam sit unde, accusantium explicabo. Ducimus odit aliquid, minima!</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
</div>

Answer 2

до position: fixed; вместо position: sticky; в липком классе

	$(window).scroll(function () {
    if ($(window).scrollTop() >= 30) {
      $('.header-bottom').addClass('sticky');
      $('.header-bottom').css('line-height','80px');
      $('.content').css('margin-top','120px');
    }else {
      $('.header-bottom').removeClass('sticky');
      $('.header-bottom').css('line-height','160px');
      $('.content').css('margin-top','20px');
    }
  });

body {
  margin: 0;
}
.header-top {
  line-height:30px;
  background: blue;
}
.header-bottom {
  line-height:160px;
  background: red;
  -webkit-transition: .45s;
  -moz-transition: .45s;
  -ms-transition: .45s;
  -o-transition: .45s;
  transition: .45s;
}
.sticky {
  position: fixed;
  top:0;
  width: 100%;
}

.content {
  margin-top: 20px;
  -webkit-transition: .45s;
  -moz-transition: .45s;
  -ms-transition: .45s;
  -o-transition: .45s;
  transition: .45s;
}

.content > div {
  margin-bottom: 100px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="header-top">Content</div>
<div class="header-bottom">Content</div>
<div class="content">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, suscipit consequuntur! Neque modi libero praesentium rerum, pariatur, assumenda obcaecati laudantium officia iste excepturi, molestias quibusdam quae sed nihil laborum.</div>
  <div>Necessitatibus, omnis odit ipsam, repudiandae beatae minima! Voluptates molestias vitae fuga officiis, aperiam earum quas laboriosam cupiditate hic vero reiciendis, numquam corporis, assumenda rem iure expedita animi magnam perferendis delectus.</div>
  <div>Eum odit hic delectus vel facilis nisi cupiditate ad enim recusandae ex, commodi sunt ullam distinctio, architecto quam nulla cumque possimus nihil qui unde magni provident ratione obcaecati fuga. Beatae.</div>
  <div>Iusto repellendus dolore atque architecto consequatur magni nulla animi possimus reiciendis, soluta similique recusandae voluptate reprehenderit, aspernatur repellat ab provident facere magnam sit unde, accusantium explicabo. Ducimus odit aliquid, minima!</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
  <div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
</div>