我有一个社会链接菜单固定在他的页面的左边，就像这样

<footer id="colophon"></footer>
<div>
   <nav>
    <ul id="social">
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
    </ul>
    </nav>
</div>

还有css

#social{
   transform: rotate(-90deg);
   position: fixed;
   transform-origin: left;
   left: 50px;
   bottom: 22px;
}

现在有了页脚，我不希望菜单在页脚的顶部，而是应该停止在页脚上方。我该如何实现呢？我不想简单地改变底部位置，而是应该在22px，但停止在页脚上方。