Свернуть div до определенного момента с помощью прокрутки

Question

Я хочу свернуть div, когда пользователь прокручивает страницу вниз.

Когда пользователь загружает страницу, у div высота 500 пикселей, когда он прокручивает, div динамически уменьшает его высоту до достижения 200 пикселей, тогда div больше не уменьшает высоту, держится в верхней части страницы и другое содержимое страницы проходит ниже этого div.

Извините за мой английский, ми родной язык испанский.

спасибо большое!

Answer 1

вы можете использовать .css()

$(document).ready(function(){ 
 
    $(window).on('scroll' , function(){ 
 
    var windowTop = $(window).scrollTop(); 
 
    if(windowTop > 500){ 
 
     $('.header').css({'position':'fixed','height': '200px'}); 
 
    }else{ 
 
     $('.header').css({'position':'relative','height': '500px'}); 
 
    } 
 
    }); 
 
});

html,body{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.content{ 
 
\t width: 100%; 
 
\t height: 200px; 
 
\t background-color: red; 
 
\t color: white; 
 
\t border: 1px solid black; 
 
} 
 
.header{ 
 
\t width: 100%; 
 
\t height: 500px; 
 
\t background-color: blue; 
 
\t color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
\t <h1>Heading</h1> 
 
</div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div>

Вы можете также использовать дополнительную/removeClass с переходным периодом в CSS

$(document).ready(function(){ 
 
    $(window).on('scroll' , function(){ 
 
    var windowTop = $(window).scrollTop(); 
 
    if(windowTop > 500){ 
 
     $('.header').addClass('scrolled'); 
 
    }else{ 
 
     $('.header').removeClass('scrolled'); 
 
    } 
 
    }); 
 
});

html,body{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.content{ 
 
\t width: 100%; 
 
\t height: 200px; 
 
\t background-color: red; 
 
\t color: white; 
 
\t border: 1px solid black; 
 
} 
 
.header{ 
 
\t width: 100%; 
 
\t height: 500px; 
 
\t background-color: blue; 
 
\t color: white; 
 
    transition-duration : 1s; 
 
} 
 

 
.header.scrolled{ 
 
    position : fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    height : 200px; 
 
    transition-duration : 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
\t <h1>Heading</h1> 
 
</div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div>