Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJaco Burger
20,807 PointsMobile - Fixed header jumps down when keyboard opens on focus.
This is an annoying issue. I've got a fixed header that jumps out of position on mobile whenever I click on a form and the virtual keyboard loads. Any ideas how to fix this?
Jquery or preferably CSS solution.
Thanks!
2 Answers
Jaco Burger
20,807 PointsThanks Andrew.
I found a way around it. Here it is for future reference if anyone has a similar issue. First you need Modernizr to pick up touch devices. Then via jquery you target the wrapper that is fixed, and change it to be Absolute while focused, and revert to fixed when off.
.headerfix {
position: fixed;
top: 0px !important;
width: 100%;
background: #fff;
z-index: 999;
}
.fixfixed .headerfix {
position: absolute !important;
}
The script:
jQuery.noConflict();
(function($) {
jQuery(function() {
if (jQuery('html').hasClass('touch')) {
/* cache dom referencess */
var $body = jQuery('body');
/* bind events */
jQuery(document)
.on('focus', 'input', function(e) {
console.log('focus on input');
$body.addClass('fixfixed');
})
.on('blur', 'input', function(e) {
console.log('blur out of input');
$body.removeClass('fixfixed');
});
}
});
})(jQuery);
Andrew Shook
31,709 PointsJaco, I can't be 100% sure but I believe this a a common bug with iOS. Generally though, you don't want to have fixed elements on a mobile device since there is limited space. I would recommend changing all your fixed elements to static on mobile devices.
Andrew Shook
31,709 PointsAndrew Shook
31,709 PointsYeah that looks about right. I have changed the best answer to be your comment since it does in fact proved an answer.