JSFiddle - React, Tailwind, and code Playground

by cfree

HTML

<div class="menu">
    <form>
        <input type="text" name="input1" placeholder="click me"/>
        <button>Submit</button>
    </form>
</div>
<div class="content">
    <p>Sed elementum, elementum odio, mauris ultricies est lectus urna nascetur. Tortor nisi nascetur vut magna magna ut porta et porttitor urna nascetur amet a, rhoncus nunc nisi turpis purus nisi sociis placerat, ac purus habitasse augue diam enim ultrices elementum dolor aliquam sociis est natoque natoque non nisi mid dapibus, placerat, ut! Tortor sociis dapibus! Nunc porta? Arcu a scelerisque, diam vut dis elit amet, in, egestas. Et scelerisque placerat sit eu, pellentesque eros. Tincidunt! Tincidunt urna adipiscing mauris ac? Dapibus. Proin pellentesque duis ac adipiscing rhoncus parturient, a auctor, cum. Nisi sociis! Lacus turpis adipiscing, nunc augue ridiculus tincidunt ultrices aliquam, dapibus cursus, nunc nec hac in, cras ut! Phasellus cursus! Et scelerisque nunc. Scelerisque lacus, ultrices dis. Sit.</p>

    <p>Ridiculus habitasse. Aenean scelerisque non. Nisi cursus duis mus porta. Purus! Mus adipiscing enim pulvinar mid sociis ultricies tincidunt? Phasellus? Aliquet rhoncus rhoncus dolor! Natoque lundium odio urna dapibus! Dignissim et dictumst ultricies! Adipiscing adipiscing porta ultrices aenean in? Lectus cras cum integer, adipiscing nec urna porttitor pellentesque facilisis rhoncus. Lundium montes natoque parturient natoque nunc phasellus a pulvinar! Cum vut! Ac et? Mattis ac mus duis quis ut urna. Ac ridiculus in, ac nascetur mattis sit? Aliquet ac magnis, odio aliquam ac, ac lorem cum phasellus! Mauris montes risus etiam rhoncus eu sed integer? Magna ultrices duis integer placerat et non rhoncus! Platea pellentesque diam auctor proin urna aenean rhoncus sociis et tristique eu adipiscing rhoncus ultrices platea.</p>

    <p>Magnis ac sed est nisi! Turpis in sociis turpis ridiculus a magnis magna rhoncus, platea, ridiculus velit nunc eu hac, turpis turpis turpis, porttitor...

CSS

.menu {
    position: fixed;
    background: tomato;
    left: 0;
    right: 0;
    top: 0;
}

.content {
    padding-top: 10px;
}

JavaScript

(function($) {
    $(document).ready(function() {
        if(navigator.userAgent.match(/iPad/i) !== null ||
            navigator.userAgent.match(/iPod/i) !== null ||
            navigator.userAgent.match(/iPhone/i) !== null) {
            var iOSKeyboardFix = {
                targetElem: $('.menu'),
                init: function() {
                    iOSKeyboardFix.targetElem.find("input, textarea").on("focus", function() {
                        console.log('bound');
                        iOSKeyboardFix.bind();
                    });
                },
                bind: function() {
                    $(document).on('scroll', iOSKeyboardFix.react);
                    iOSKeyboardFix.react();
                },
                react: function() {
                    var offsetX = iOSKeyboardFix.targetElem.offset().top;
                    console.log('offsetX: ' + offsetX);
                    var scrollX = $(window).scrollTop();
                    console.log('scrollX: ' + scrollX);
                    var changeX = offsetX - scrollX;
                    console.log('changeX: ' + changeX);
    
                    iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});
    
                    $('input, textarea').on('blur', iOSKeyboardFix.undo);
    
                    $(document).on('touchstart', iOSKeyboardFix.undo);
                    console.log('react');
                },
                undo: function() {
                    iOSKeyboardFix.targetElem.removeAttr('style');
                    document.activeElement.blur();
                    $(document).off('scroll',iOSKeyboardFix.react);
                    $(document).off('touchstart', iOSKeyboardFix.undo);
                    $('input, textarea').off('blur', iOSKeyboardFix.undo);
                    console.log('undo');
                }
            };
    
            iOSKeyboardFix.init();
        }
    });
})(jQuery);