There is a block1, which is fixed when scrolling the page, it works correctly until you click on the switch and block2 appears. After block2 has appeared, block1, which is fixed, is triggered ahead of time and it turns out that block1 is jumping. 
$(document).ready(function() { $('input#switch-track').click(function() { $('input#switch-track').prop('checked', function() { $(".track-option").slideToggle(); }); }); }); $(document).ready(function() { function fixedFilter() { var accountFilter = $('.account__filter'), topAccountFilter = $(accountFilter).offset().top, heightHeader = $('.header').height(); $(window).scroll(function() { var windowScroll = $(window).scrollTop() + heightHeader; if (windowScroll > topAccountFilter) { $(accountFilter).addClass('account__filter--fixed'); } else { $(accountFilter).removeClass('account__filter--fixed'); } }); } $(document).ready(fixedFilter); $(window).on('resize', function() { fixedFilter(); }); }); *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100%; min-height: 100%; font-size: 14px; } .page-wrapper { display: flex; flex-direction: column; min-height: 100%; } body, input, button, textarea { -webkit-appearance: none; -moz-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } fieldset { margin: 0; padding: 0; border: none; } .main { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 95px; min-height: 100%; } .header { display: flex; align-items: center; position: fixed; width: 100%; height: 95px; background: url("../img/header/header-bg.jpg") no-repeat; background-size: cover; z-index: 1002; } .header::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(22, 22, 23, 0.75); } .switch__container { position: relative; width: 67px; height: 40px; } .switch__form input[type=checkbox] { position: absolute; top: 0; left: 0; width: 67px; height: 40px; opacity: 0; outline: none; } .switch__label { display: block; position: relative; width: 67px; height: 40px; background-color: #1f1f1f; border: 1px solid #181818; border-radius: 20px 20px; cursor: pointer; } .switch__label::before, .switch__label::after { content: ''; position: absolute; top: 50%; margin-top: -9px; width: 18px; height: 18px; border: 1px solid #353535; border-radius: 8px 8px; transform: scale(1); transition: all 0.3s ease-out; } .switch__label::before { left: 10px; } .switch__label::after { right: 10px; } .switch__toggle { display: block; position: absolute; left: 0; width: 40px; height: 40px; background-color: rgba(16, 208, 190, 0.09); border-radius: 50%; overflow: hidden; transition: all 0.3s ease-out; } .switch__toggle::after { content: ''; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; background: linear-gradient(141deg, #2af598 0%, #08aeea 100%, #a0d8ff 100%); border-radius: 50%; } .switch__form input[type=checkbox]:checked+.switch__label::before { transform: scale(1); } .switch__form input[type=checkbox]:checked+.switch__label::after { transform: scale(0); } .switch__form input[type=checkbox]:checked+.switch__label .switch__toggle { left: calc(67px - 40px); background-color: rgba(136, 136, 136, 0.09); } .switch__form input[type=checkbox]:checked+.switch__label .switch__toggle::after { background: linear-gradient(141deg, #363636 0%, #363636 100%); } .block { height: 200px; background: green; opacity: .5; } .account-track { margin-bottom: 20px; } .account-track__container { display: flex; flex-flow: row wrap; align-items: center; margin-bottom: 20px; padding: 0 1.85%; } .account-track__col { display: flex; flex-direction: row; align-items: stretch; flex: 1; padding: 10px 0; background-color: #181818; border: 1px solid #202020; border-radius: 2px 2px; } .account-track__content { display: flex; flex-direction: column; justify-content: center; flex: 1; } .account-track__title { display: flex; flex-flow: row wrap; margin-bottom: 5px; } .account-track__name { margin-right: 14px; font-size: 14px; line-height: 20px; color: #fff; } .account-track__more { position: relative; padding-right: 20px; color: #424242; line-height: 20px; cursor: pointer; } .account-track__more::after { content: ''; position: absolute; top: -3px; right: 0; width: 14px; height: 14px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAM1BMVEVgYGZgYGZgYGZgYGZgYGZgYGZgYGZgYGZHcExgYGZgYGZgYGZgYGZgYGZgYGZgYGZgYGb8SgemAAAAEXRSTlN9HF9VJARPNwB1aHAWD0EQLjWxu1gAAABdSURBVAgdBcGBYcIwEAAxBez8GWjp/tNWUrXXzNpVqjlwplI3wF0aeH2fmOwDr+uBsy3wOGAZeP5cYAz4XGAsePcLln3w7AFna/D6/L0xqRvgLtUcOFOp2mtm7ap/OYsDCqMFCewAAAAASUVORK5CYII=") no-repeat; } .account-track__desc { color: #fff; } .account-track__switch { display: flex; justify-content: center; align-items: center; position: relative; flex-basis: 123px; } .account-track__switch::after { content: ''; position: absolute; top: 21%; bottom: 21%; left: 0; width: 1px; background: #212123; } .track-option { width: 100%; background-color: #0a0a0a; border: 1px solid rgba(57, 57, 57, 0.64); display: none; } .track-option__container { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 20px 0 28px; width: 78.5%; } .track-option__title { font-size: 24px; color: #fff; } .track-option__subtitle { margin-bottom: 17px; font-size: 14px; color: rgba(255, 255, 255, 0.21); } .track-option__content { display: flex; flex-direction: row; align-items: center; padding: 20px 44px; width: 100%; border-top: 1px solid rgba(39, 39, 39, 0.5); border-bottom: 1px solid #272727; } .account-content { display: flex; flex-direction: column; position: relative; } .account__filter { display: flex; align-items: stretch; position: absolute; top: 0; right: 0; left: 0; min-height: 90px; border-top: 1px solid rgba(129, 129, 129, 0.39); border-bottom: 1px solid rgba(255, 255, 255, 0.12); z-index: 1; background: red; } .account__filter--fixed { position: fixed; top: 95px; right: 0; left: 0; z-index: 999; /*transition: top .5s linear;*/ ; } .account__filter-form { display: flex; align-items: stretch; width: 100%; } .account__filter-form fieldset { width: 100%; } .account__filter-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 1.85%; height: 100%; } .account__product { display: flex; flex-flow: row wrap; justify-content: flex-start; padding: 30px 1.85% 0; }/ png; base64, iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAM1BMVEVgYGZgYGZgYGZgYGZgYGZgYGZgYGZgYGZHcExgYGZgYGZgYGZgYGZgYGZgYGZgYGZgYGb8SgemAAAAEXRSTlN9HF9VJARPNwB1aHAWD0EQLjWxu1gAAABdSURBVAgdBcGBYcIwEAAxBez8GWjp / tNWUrXXzNpVqjlwplI3wF0aeH2fmOwDr + uBsy3wOGAZeP5cYAz4XGAsePcLln3w7AFna / D6 / L0xqRvgLtUcOFOp2mtm7ap / OYsDCqMFCewAAAAASUVORK5CYII =") no-repeat;*, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100%; min-height: 100%; font-size: 14px; } .page-wrapper { display: flex; flex-direction: column; min-height: 100%; } body, input, button, textarea { -webkit-appearance: none; -moz-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } fieldset { margin: 0; padding: 0; border: none; } .main { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 95px; min-height: 100%; } .header { display: flex; align-items: center; position: fixed; width: 100%; height: 95px; background: url("../img/header/header-bg.jpg") no-repeat; background-size: cover; z-index: 1002; } .header::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(22, 22, 23, 0.75); } .switch__container { position: relative; width: 67px; height: 40px; } .switch__form input[type=checkbox] { position: absolute; top: 0; left: 0; width: 67px; height: 40px; opacity: 0; outline: none; } .switch__label { display: block; position: relative; width: 67px; height: 40px; background-color: #1f1f1f; border: 1px solid #181818; border-radius: 20px 20px; cursor: pointer; } .switch__label::before, .switch__label::after { content: ''; position: absolute; top: 50%; margin-top: -9px; width: 18px; height: 18px; border: 1px solid #353535; border-radius: 8px 8px; transform: scale(1); transition: all 0.3s ease-out; } .switch__label::before { left: 10px; } .switch__label::after { right: 10px; } .switch__toggle { display: block; position: absolute; left: 0; width: 40px; height: 40px; background-color: rgba(16, 208, 190, 0.09); border-radius: 50%; overflow: hidden; transition: all 0.3s ease-out; } .switch__toggle::after { content: ''; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; background: linear-gradient(141deg, #2af598 0%, #08aeea 100%, #a0d8ff 100%); border-radius: 50%; } .switch__form input[type=checkbox]:checked+.switch__label::before { transform: scale(1); } .switch__form input[type=checkbox]:checked+.switch__label::after { transform: scale(0); } .switch__form input[type=checkbox]:checked+.switch__label .switch__toggle { left: calc(67px - 40px); background-color: rgba(136, 136, 136, 0.09); } .switch__form input[type=checkbox]:checked+.switch__label .switch__toggle::after { background: linear-gradient(141deg, #363636 0%, #363636 100%); } .block { height: 200px; background: green; opacity: .5; } .account-track { margin-bottom: 20px; } .account-track__container { display: flex; flex-flow: row wrap; align-items: center; margin-bottom: 20px; padding: 0 1.85%; } .account-track__col { display: flex; flex-direction: row; align-items: stretch; flex: 1; padding: 10px 0; background-color: #181818; border: 1px solid #202020; border-radius: 2px 2px; } .account-track__content { display: flex; flex-direction: column; justify-content: center; flex: 1; } .account-track__title { display: flex; flex-flow: row wrap; margin-bottom: 5px; } .account-track__name { margin-right: 14px; font-size: 14px; line-height: 20px; color: #fff; } .account-track__more { position: relative; padding-right: 20px; color: #424242; line-height: 20px; cursor: pointer; } .account-track__more::after { content: ''; position: absolute; top: -3px; right: 0; width: 14px; height: 14px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAM1BMVEVgYGZgYGZgYGZgYGZgYGZgYGZgYGZgYGZHcExgYGZgYGZgYGZgYGZgYGZgYGZgYGZgYGb8SgemAAAAEXRSTlN9HF9VJARPNwB1aHAWD0EQLjWxu1gAAABdSURBVAgdBcGBYcIwEAAxBez8GWjp/tNWUrXXzNpVqjlwplI3wF0aeH2fmOwDr+uBsy3wOGAZeP5cYAz4XGAsePcLln3w7AFna/D6/L0xqRvgLtUcOFOp2mtm7ap/OYsDCqMFCewAAAAASUVORK5CYII=") no-repeat; } .account-track__desc { color: #fff; } .account-track__switch { display: flex; justify-content: center; align-items: center; position: relative; flex-basis: 123px; } .account-track__switch::after { content: ''; position: absolute; top: 21%; bottom: 21%; left: 0; width: 1px; background: #212123; } .track-option { width: 100%; background-color: #0a0a0a; border: 1px solid rgba(57, 57, 57, 0.64); display: none; } .track-option__container { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 20px 0 28px; width: 78.5%; } .track-option__title { font-size: 24px; color: #fff; } .track-option__subtitle { margin-bottom: 17px; font-size: 14px; color: rgba(255, 255, 255, 0.21); } .track-option__content { display: flex; flex-direction: row; align-items: center; padding: 20px 44px; width: 100%; border-top: 1px solid rgba(39, 39, 39, 0.5); border-bottom: 1px solid #272727; } .account-content { display: flex; flex-direction: column; position: relative; } .account__filter { display: flex; align-items: stretch; position: absolute; top: 0; right: 0; left: 0; min-height: 90px; border-top: 1px solid rgba(129, 129, 129, 0.39); border-bottom: 1px solid rgba(255, 255, 255, 0.12); z-index: 1; background: red; } .account__filter--fixed { position: fixed; top: 95px; right: 0; left: 0; z-index: 999; /*transition: top .5s linear;*/ ; } .account__filter-form { display: flex; align-items: stretch; width: 100%; } .account__filter-form fieldset { width: 100%; } .account__filter-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 1.85%; height: 100%; } .account__product { display: flex; flex-flow: row wrap; justify-content: flex-start; padding: 30px 1.85% 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page-wrapper"> <header class="header"> </header> <main class="main"> <div class="block"></div> <div class="account-track"> <div class="account-track__container"> <div class="account-track__col"> <div class="account-track__content"> <div class="account-track__title"> <span class="account-track__name">Track Account </span> <span class="account-track__more">Learn more</span> </div> <p class="account-track__desc">Save this trip to track price changes and receive price alerts and travel tips by email</p> </div> <div class="account-track__switch"> <form action="#" class="switch__form"> <fieldset> <div class="switch__container"> <input type="checkbox" id="switch-track"> <label for="switch-track" class="switch__label"> <span class="switch__toggle"></span> </label> </div> </fieldset> </form> </div> </div> </div> <div class="track-option"> <form action="#" class="track-option__form"> <fieldset> <div class="track-option__container"> <h1 class="track-option__title">БЛОК 2</h2> <p class="track-option__subtitle">Testing text, bla, yo</p> <div class="track-option__content"> </div> </div> </fieldset> </form> </div> </div> <div class="account-content"> <div class="account__filter"> <form action="#" class="account__filter-form"> <fieldset> <div class="account__filter-container"> <h2>БЛОК 1</h2> </div> </fieldset> </form> </div> <div class="account__product"> <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>4Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>6Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>7Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>8Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>9Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>10Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>11Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>12Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>13Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>14Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>15Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>16Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>17Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>18Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>19Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>20Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>21Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>22Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>23Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>24Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>25Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>26Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>27Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>28Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>29Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> <p>30Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem reprehenderit!</p> </div> </div> </main> </div> 
