shrink a sticky div while scrolling down

hey i have in my site a stick div to create a new post
i want this div to animated shrink to a little box the will stick to the header while user scrolls down
and when im pressing on it or scrolling up this div will be visable again
any one can help me how to do this

 <form
      onSubmit={(e) => {
        handleSubmit(e);
      }}
      className={` top-[106px] z-10 bg-main px-3 pt-2 rounded-lg border border-gray-300`}
    >
      {titlePost()}
      {isPostActive && (
        <div className="flex flex-col py-2 ">
          <CommunitySelect community={community} setCommunity={setCommunity} />
          {textArea()}
          {imageBoxOpen && (
            <DropzoneComponent
              setImages={setImages}
              maxImagesLength={maxImageLength}
            />
          )}
          {createPostButton()}
        </div>
      )}
    </form>```