javascript - 页面顶部的画布外搜索表单

Question

我正在尝试为网站制作画布外搜索表单。单击“搜索”按钮时，输入表单应从页面顶部（100% 宽度）向下移动，将其余内容拉下。

我不是 javascript 专业人士，所以我在网上搜索但没有找到任何东西，只有在具有不同用途的画布菜单上。我试过了，但我很难适应它们。

正确制作它的步骤是什么？

这是搜索表格：

  <form method="get" action="<?php echo $PS ?>web/search.php">
            <label for="search"><?php echo t('search') ?></label>

            <input type="text" name="search" id="search" />

            <button type="submit">&nbsp; <span class="visuallyhidden">Go</span></button>
         </form>

有小费吗？谢谢！