Home › Forums › JavaScript › My Page Jumps Down, Only on Mobile › Reply To: My Page Jumps Down, Only on Mobile
September 17, 2016 at 2:10 am
#245646
grebre0
Participant
It looks like it jumps because of Chrome top bar. When visible this bar changes window height (viewport height).
The problem is that your .video-content
block height is set to 100vh. So, when bar is visible, viewport is getting smaller as well as .video-content
block and all of the content above jump to the top a little.
The task is to make the height of .video-content
block equal to 100vh. But it should be fixed value so that it not react to the top bar.
Leave your css as it is and consider this javascript solution
function setHeight() {
var windowHeight = $(window).height(),
$block = $('.video-content');
if(windowHeight > 550) { // 550px is your css min-height for this block
$block.css('min-height': windowHeight + 'px')
} else {
$block.css('min-height': '')
}
}
$(document).ready(function() {
setHeight();
$(window).on('resize orientationchange', setHeight);
});