I have a little problem, im building a nav bar that only shows when scrolled down 300 pixels, the problem here is that i have an input text on the nav which is not working properly, for example when i type to write on it , it doesn write anything but when i move a bit the scroll it shows the text inside, anyone can say me whats wrong on it?
HTML Code:
<div class="nav" style="width:100%; display:none; margin-top:-400px; height:70px; box-shadow:1px 1px 1px #e2e1e2; position:fixed; z-index:999; background-color:white;">
                <img src="images/artiiseconb.png" style="margin-top:12px; margin-left:-1175px;" />
                <form method="POST" style="margin-top:-29px; ">
                <input type="text" placeholder="Search" style="background-image:url('images/searchb2.png'); color:white; text-indent:20px; width:193px; background-color:transparent; height:28px;" />
                </form>
        </div>

<script>
    function slider() {
     if (document.body.scrollTop > 300) //Show the slider after scrolling down 100px
            $('.nav').show();
     else
             $('.nav').hide();
    }

    $(window).scroll(function () {
        slider();
    });

    $(document).ready(function () {
        slider();

</script>
    });