Как решить проблему фиксациии блока при прокрутке?

280
02 февраля 2018, 20:30

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

$(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; 
}
<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>

Answer 1

Вам просто после включения второго блока, нужно снова вызвать fixedFilter(), потому что высота изменилась

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(function() { 
  fixedFilter(); 
  $('input#switch-track').click(function() { 
    $('input#switch-track').prop('checked', function() { 
      $(".track-option").slideToggle(1000, function() { 
        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; 
}
<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>

READ ALSO
Не работает навигация в landscape режиме

Не работает навигация в landscape режиме

Добрый деньне открывается меню в landscape режиме на экранах ipad

212
Склеить изображение и css

Склеить изображение и css

Приложение в котором можно редактировать изображенияМожно ли сделать чтобы при скачивании картинки обратно сохранялись изменения прикрученные...

245
Как подключить стиль css в php файле?

Как подключить стиль css в php файле?

Как подключить стиль css в php файле? В header подключила, а в другой файл - не получаетсяЕсть файл header

442
Как правильно обрезать низ изображения?

Как правильно обрезать низ изображения?

Имеется 2 блока, у каждого из блоков задан bg изображениемКак правильно bg первого блока с низу обрезать так, чтобы получилось примерно то, что...

283