var navbar = $('#navbar-main'),
distance = navbar.offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
if (!navbar.hasClass('navbar-fixed-top')) {
navbar.addClass('navbar-fixed-top');
$("body").css("padding-top", "90px");
}
}
else {
if (navbar.hasClass('navbar-fixed-top')) {
navbar.removeClass('navbar-fixed-top');
$("body").css("padding-top", "0px");
}
}
});
body {
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 120px;
background: #ccc;
}
#navbar-main {
width: 100%;
height: 90px;
background: #f00;
}
#navbar-main.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header>header</header>
<div id="navbar-main">navbar-main</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac semper diam. Proin odio neque, ornare vitae nibh in, maximus efficitur sapien. Nullam velit quam, sollicitudin in sollicitudin euismod, bibendum quis velit. Donec vel suscipit erat. Integer velit est, pretium at nisl at, maximus varius augue. Quisque lectus tortor, commodo a interdum eget, semper a velit. Nunc in lobortis diam, vel sodales velit.</p>
<p>Curabitur eu sapien id ligula convallis sagittis. Praesent eu dolor mi. Pellentesque vitae erat ullamcorper, ultricies lorem eu, euismod ex. In accumsan rutrum ultricies. Pellentesque quis libero consectetur, luctus felis eu, volutpat diam. Donec porttitor mauris sit amet diam pulvinar, eu euismod turpis feugiat. Pellentesque aliquam dapibus pretium. Nulla accumsan, leo ac luctus gravida, justo purus sollicitudin lorem, vel euismod ipsum libero vitae ligula. Cras nisl est, posuere sit amet ligula eu, egestas aliquam lectus.</p>
<p>Nam quis egestas ipsum, non ultricies enim. Vivamus turpis nibh, scelerisque in gravida at, faucibus lobortis lacus. Donec in quam auctor orci finibus ullamcorper. Etiam orci lacus, laoreet id magna sit amet, lobortis auctor sem. In interdum mollis egestas. Fusce at nisl nunc. Duis fermentum aliquam sem. Praesent sapien ante, aliquam at congue ac, sodales ut eros. Cras turpis arcu, rhoncus nec tincidunt quis, imperdiet nec tortor. Donec lorem metus, ultricies eget tortor eget, mollis efficitur risus. Morbi in leo ut nunc porta imperdiet. Quisque imperdiet luctus mauris, sed elementum purus pharetra eu.</p>
<p>Duis a dignissim neque. Integer facilisis, ipsum nec dictum dictum, leo purus volutpat lacus, id commodo erat nunc eu ex. Duis ex lectus, lacinia nec fringilla convallis, fermentum at ligula. Ut eros orci, mollis et sodales vel, aliquam sed eros. Ut luctus pellentesque nisi, eget mollis justo volutpat sit amet. Nam dictum sapien et arcu sollicitudin laoreet. Proin vel fermentum tellus. Maecenas tincidunt nisl at sapien imperdiet, et euismod magna fringilla.</p>
<p>Sed sollicitudin ultrices massa, eu consectetur nibh. Etiam tincidunt mattis scelerisque. In accumsan sapien eu interdum imperdiet. Integer vulputate, tortor ut auctor blandit, turpis lacus tristique diam, id hendrerit justo turpis feugiat felis. Vivamus in ipsum luctus, porta risus finibus, maximus tellus. Vestibulum in sapien sed erat consectetur varius sed sed dolor. Nullam nec risus mollis, egestas nibh pulvinar, sollicitudin tellus. Morbi dapibus sed justo sit amet consequat.</p>
<p>Donec luctus fermentum purus et lacinia. Donec sagittis at nunc in congue. Vestibulum scelerisque, arcu et suscipit efficitur, lectus nulla bibendum metus, vel faucibus ipsum ante sit amet est. Morbi eleifend ornare erat, non interdum odio cursus et. Vivamus erat nunc, gravida non placerat at, venenatis vel magna. Donec dolor dolor, luctus nec tincidunt eu, aliquet vitae nisl. Nunc faucibus dolor mi, aliquam elementum libero tempor eu. Integer egestas ante non dolor pretium pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sapien lectus, porta sit amet convallis vel, pulvinar ultricies nibh. Ut ornare felis sed orci viverra consequat. Aenean ultrices placerat massa vitae pellentesque. In fermentum semper urna auctor pulvinar. Phasellus molestie elementum feugiat. Sed convallis enim eget orci luctus, et iaculis metus mollis.</p>
<p>Nam in dui ac nibh venenatis suscipit. Nam porttitor maximus erat a aliquam. Fusce rhoncus lacus ac dui consectetur feugiat non in arcu. Nunc vitae auctor neque, non mollis risus. Donec sem augue, faucibus eu gravida nec, dapibus sed tellus. Donec cursus, nisl sed tristique sagittis, elit dolor cursus dui, in commodo dolor mauris semper odio. Mauris vulputate nibh orci, quis ornare ipsum maximus et. Maecenas congue blandit lacinia. Sed imperdiet magna id elementum viverra. Donec pellentesque ut tortor sed placerat. Nullam eget nisl ac neque imperdiet fringilla. Praesent vitae sem ligula.</p>
<p>Nam mauris augue, convallis et ex id, tempor cursus justo. Vivamus eget finibus lectus. Donec vel elit felis. Aenean iaculis sit amet sem nec dapibus. Sed congue ipsum odio, a aliquam sapien commodo a. Donec gravida sodales nibh. Quisque tristique turpis ac velit tincidunt hendrerit.</p>
<p>Fusce in consequat sapien, non scelerisque enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id placerat orci. Fusce dignissim nisl in lorem egestas iaculis. Pellentesque posuere eros quis ligula tincidunt, ac vestibulum nisi convallis. Curabitur sed sapien ornare, interdum erat accumsan, condimentum est. In dignissim, nulla eget rutrum blandit, enim tellus commodo felis, vitae sodales tortor orci nec mauris. Maecenas id neque non quam consectetur eleifend.</p>
<p>Integer sit amet velit tempus, mattis sapien sit amet, faucibus turpis. Nulla ac est vel orci viverra fermentum. Aliquam ultrices libero urna. Mauris id suscipit justo, non sodales nisi. Cras hendrerit ultricies porta. Duis aliquet placerat diam non molestie. Mauris non metus sed eros maximus tincidunt et eu velit. Cras quis lacus est.</p>
なぜあなたは同じ文で削除し、同じクラスを追加していますか？ –