<style> *{margin:0;padding:0;} html{overflow:hidden;} .page{height:100vh;width:100%;overflow-y:scroll;background:#999;} .content{height:3000px;width:80%;margin:0 auto;background:#0FF;} .fix{height:0;overflow:hidden;text-align:right;}/* 此处利用子元素绝对定位absolute后父元素overflow：hidden失效的情况使需要固定的元素显示出来 */ .fix_element{position:absolute;top:50%;background:#F00;height:50px;width:50px;} </style> <body> <div class="page"> <div class="content"> <div class="fix"> <a href="#" class="fix_element"></a> </div> </div> </div> </body>
首先将fix里加入一个空格 在需要固定显示元素的前面，将fix的height:0；overflow：hideen；右侧对其,紧接着将fix_element绝对定位，利用absolute的跟随性让其在空格 后显示；在设置top：50%。之后将父元素fixoverflow：hidden即可（利用子元素绝对定位后父元素overflow失效的情况让fix显示出来）。
虽然代码显得冗长，更多的是为了拓展下思路，利用不同的方法解决问题