Есть блок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>
Вам просто после включения второго блока, нужно снова вызвать 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Добрый деньне открывается меню в landscape режиме на экранах ipad
Приложение в котором можно редактировать изображенияМожно ли сделать чтобы при скачивании картинки обратно сохранялись изменения прикрученные...
Как подключить стиль css в php файле? В header подключила, а в другой файл - не получаетсяЕсть файл header
Имеется 2 блока, у каждого из блоков задан bg изображениемКак правильно bg первого блока с низу обрезать так, чтобы получилось примерно то, что...