最近做了一个网站,老板要求在当前页面的下面要有一个公司的联系方式,随意滚屏都一直保持在屏幕的下面不会消失。由于本人对JS不是很懂,在网上找了许久也没有找到合适的代码,请在线高手给予解决,最好有一个完整的代码,谢谢

解决方案 »

  1.   

    你可以根据需要调整
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    html,body{margin:0;padding:0;}
    #y1 {position:fixed;top:0;left:0;width:100px;height:100px;border:1px solid red;}
    #y2 {position:fixed;top:0;right:0;width:100px;height:100px;border:1px solid red;}
    #y3 {position:fixed;bottom:0;left:0;width:100px;height:100px;border:1px solid red;}
    #y4 {position:fixed;bottom:0;right:0;width:100px;height:100px;border:1px solid red;}
    </style>
    <!--[if lte IE 6]>
    <style>
    #y1 {position:absolute;}
    #y2 {position:absolute;}
    #y3 {position:absolute;}
    #y4 {position:absolute;}
    </style>
    <![endif]-->
     
    <script type="text/javascript">
      //以下所有脚本只为IE6写,其他浏览器完全可以删除。
      function getViewportScrollX() {
        var scrollX = 0;
        if (document.documentElement && document.documentElement.scrollLeft) {
          scrollX = document.documentElement.scrollLeft;
        }
        else if (document.body && document.body.scrollLeft) {
          scrollX = document.body.scrollLeft;
        }
        else if (window.pageXOffset) {
          scrollX = window.pageXOffset;
        }
        else if (window.scrollX) {
          scrollX = window.scrollX;
        }
        return scrollX;
      }
     
      function getViewportScrollY() {
        var scrollY = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
          scrollY = document.documentElement.scrollTop;
        }
        else if (document.body && document.body.scrollTop) {
          scrollY = document.body.scrollTop;
        }
        else if (window.pageYOffset) {
          scrollY = window.pageYOffset;
        }
        else if (window.scrollY) {
          scrollY = window.scrollY;
        }
        return scrollY;
      }
     
      function getViewportWidth() {
        var width = 0;
        if (document.documentElement && document.documentElement.clientWidth) {
          width = document.documentElement.clientWidth;
        }
        else if (document.body && document.body.clientWidth) {
          width = document.body.clientWidth;
        }
        else if (window.innerWidth) {
          width = window.innerWidth - 18;
        }
        return width;
      }
     
      function getViewportHeight() {
        var height = 0;
        if (window.innerHeight) {
          height = window.innerHeight - 18;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
          height = document.documentElement.clientHeight;
        }
        else if (document.body && document.body.clientHeight) {
          height = document.body.clientHeight;
        }
        return height;
      }
     
      if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) {
        window.ononload = window.onscroll = window.onresize = function (e) {
          var t = getViewportScrollY();
          var l = getViewportScrollX();
          var w = getViewportWidth();
          var h = getViewportHeight();
          document.getElementById("y1").style.left = l + "px";
          document.getElementById("y1").style.top = t + "px";
     
          document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
          document.getElementById("y2").style.top = t + "px";
     
          document.getElementById("y3").style.left = l + "px";
          document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
     
          document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
          document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
        }
      }
    </script>
    </head>
    <body>
    <div id="y1">左上角位置的内容</div>
    <div id="y2">右上角位置的内容</div>
    <div id="y3">左下角位置的内容</div>
    <div id="y4">右下角位置的内容</div>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    </body>
    </html>
      

  2.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">    //解决ie6.0 的bug
        function handingIE6() {
            if ($.browser.msie && $.browser.version == "6.0") {
                $("#flowDiv").css({ "position": "absolute", "right": "10px", "z-index": 100 });
                //底部显示
                var divBottom = $(window).scrollTop() + $(window).height() - $("#flowDiv").outerHeight(true) - 10;
                $("#flowDiv").animate({ top: divBottom }, { duration: 400, queue: false });
            }
        }    $(function () {
            //关闭按钮??
            $("#btnClose").click(function () {
                $("#flowDiv").fadeOut("fast");
            });        //左侧点击显示??
            $("#showFlow").click(function () {
                $("#flowDiv").slideDown("slow");
            });        //IE6.0 执行D代码?
            if ($.browser.msie && $.browser.version == "6.0") {
                handingIE6();        } else {
                $("#flowDiv").css({ "position": "fixed", "right": "10px", "bottom": "10px", "z-index": 100 });
            }
            //显示浮动层?
            //$("#flowDiv").slideDown("slow");
            $("#flowDiv").show();
            //ie6.0 运行D
            $(window).scroll(function () { handingIE6(); }).resize(function () { handingIE6(); });
        })
    </script>
    <style type="text/css">
        #flowDiv{ width:250px;  overflow:hidden; border:solid 1px green; font-size:13px; display:none;}
        #flowTitle{padding:3px 5px; height:20px; line-height:20px; background:#FFDD55; border-bottom:solid 1px green;  }
        #flowContent{height:100px; padding:5px; background:#E0F7FF;}
    </style>
    </head>
    <body>
    <div id="flowDiv">
        <div id="flowTitle"><span style="float:left">标题a</span><span id="btnClose" style="float:right; cursor:pointer"> x?? </span></div>
        <div id="flowContent">内容Y</div>
    </div><p id="showFlow" style="height:1500px;  padding:10px; width:17px; cursor:pointer; background:#99AFC4; te">点击显示弹出层?</p>
    </body>
    </html>
      

  3.   

    ie6已经可以不用JS控制了!CSS可以!http://www.ok22.org/你可以用IE6测试!关掉弹出窗口。左上角会有一个层不会有移动的感觉!