解决position:fix中的固底定位在跳转后返回的抖动

相信不少人做移动端项目的时候都会遇到position:fixed 的坑。

下面提供一个解决方法，不用引入任何其他的js库，纯css解决。

 

解决问题的关键就是：fixed元素内部必须嵌套一个position:absolute元素，用来装载内容，目的就是为了让内容脱离fixed文档流，屏蔽一些fixed的坑。

我这边参考的是http://www.bubuko.com/infodetail-667527.html

   当时用了很多办法，这边用了套一个wrap css的样式来解决，就是里面定义一个position为absolute来解决。

     #bugaodown_bugaohtml {
    position:fixed;
    width: 10rem;
    height: 1.53125rem;
    bottom:0.1px;
    z-index: 999;
    -webkit-transform: translateZ(0);

}
        .wrap {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }

html是：

   <ul class="ulbugao wrap"><li>
     <%
       
         if (this.IsInTTJJ)
             
          {
               
             %>
         
         <div id="fixbottom" style="display:none">
               <a href="http://ttjj-openaccount" class="img"  title="" >

      <%--   <img class="img"   alt="" src="http://j5.dfcfw.com/image/201603/20160311194620.png">--%>
                 <div class="floatimg"><p>立即开户赚钱</p></div>
                         </a></div>
        
        

                 <%  
                     
                 } else           
          {
              %>
        
              <div id="fixbottom" style="display:none">  <a href="http://js1.eastmoney.com/tg.aspx?ID=4318" class="img" title="" >
        <%--<img class="img"   alt="" src="http://j5.dfcfw.com/image/201603/20160311194620.png">--%>
                 <div class="floatimg"><p>立即开户赚钱</p></div>
                         </a></div>
          


   
       
         <%} %>

                          </li>
     </ul>