zoukankan      html  css  js  c++  java
  • 右下角悬浮框案列

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>右下角悬浮框案列</title>
      <style>
        body{
          height: 2000px;
        }
        #div1{
           200px;
          height: 150px;
          background: red;
          position: absolute;
          right: 0;
          bottom: 0;
    
        }
      </style>
      <script>
        window.onscroll  =function () {
          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          console.log(scrollTop)
    
          var oDiv =document.getElementById('div1');
    
          //oDiv.offsetHeight 获取div的高度
          oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight +scrollTop +'px'
        }
      </script>
    
    </head>
    <body>
    
    <div id="div1">
    
    </div>
    </body>
    </html>
    

     分析图:

    效果图:

  • 相关阅读:
    bzoj1797
    bzoj1266
    bzoj1497
    bzoj1412
    bzoj3156
    JSOI2014第三轮总结
    bzoj1855
    bzoj1044
    codeforces 371D
    codeforces 371B
  • 原文地址:https://www.cnblogs.com/malong1992/p/11996136.html
Copyright © 2011-2022 走看看