实现div始终固定在窗口底部的代码

转载 2013年12月03日 10:28:35

        网上实现这种功能的代码挺多的,但有个问题,网页如果放大的话,这个div会跟着放大,但不像网页的其他内容,它不能左右滑动,结果显示不全。而工作上的需求是jsp页面在手机上浏览的,这样就非常郁闷。后来换了一种方式,就是在网页一加载的时候,从窗体底部生成一个div,然后设置随着滚动条的滑动,div也自动滑动到窗体底部。同样能达到效果,而且放大后能显示完整。不过设计网页时最后得控制一下整体的最小宽度。

       以下是实现的js代码:

 <script>
function $(id)
{
  return document.getElementById(id);
}
var LoginUI = !!window.LoginUI || {};

LoginUI.getViewportWidth = function(){
    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;
}


LoginUI.getViewportHeight = function() {
    var height=0;
    if(window.innerHeight){
    height=window.innerHeight;}
    else if(document.documentElement&&document.documentElement.clientHeight){
    height=document.documentElement.clientHeight;}
    else if(document.body&&document.body.clientHeight){
    height=document.body.clientHeight;}
    return height;
}

LoginUI.getViewportScrollX = function(){
    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;
}

LoginUI.getViewportScrollY=function() {
    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 scrollMsgTip()
{

document.getElementById("msgtip").style.display="block";

   var t = LoginUI.getViewportHeight() + 
      LoginUI.getViewportScrollY() - $("msgtip").offsetHeight;
   $("msgtip").style.top = t + "px"; 
   
   /*
   $("msgtip").style.left = LoginUI.getViewportWidth() + 
      LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
    */  
   
}

function scrollTip()
{
    scrollMsgTip();
    
}

window.onload = scrollTip;
window.onscroll = scrollTip;
window.scrollTo(5, 5);//这段可以去掉,工作上的需求加上的

//以下可以去掉,工作上的需求加上的
function initScrollA(){//再执行一次移动document.getElementById("msgtip").style.display="block";var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight; $("msgtip").style.top = t + "px"; }
//以下可以去掉,工作上的需求加上的
function timeOut(){ setTimeout('initScrollA()',100); }</script>




相关文章推荐

CSS制作始终固定页面底部的DIV

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 纯CSS制...
  • xk2y
  • xk2y
  • 2011年08月28日 02:41
  • 837

Css如何定位网站的footer在固定位置(用DIV+CSS让footer始终在底部)

平时拿CSS布局都是一些内容比较多的网站,这两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容...

html固定浮动在底部div的实现效果

Document    body{  height:1500px;  }  .footer{  z-index:99999;  position:fixed;   bottom:0; left:0; ...

CSS实现定位DIV固定在网页底部

先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,按普通的布局,就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部,而留下了大...
  • cludyun
  • cludyun
  • 2012年12月24日 13:43
  • 781

DIV始终固定在网页右下角位置的CSS实现方法,返回顶部功能

DIV始终固定在网页右下角位置的CSS实现方法,一个实用的提示效果,基于CSS-Div,打开网页后始终显示在右下角,拖动滚动条仍然固定在右下角不会变,通过这个CSS代码断你会更深一层理解CSS的层定位...

CSS固定在网页底部的层div

html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; } #Main { pos...
  • ysghyy
  • ysghyy
  • 2011年09月27日 12:54
  • 2193

Android任意窗口添加固定/浮动窗体:音乐播放器底部/顶部常驻播放窗体

 Android任意窗口添加固定/浮动窗体:音乐播放器底部/顶部常驻播放窗体 在Android窗口添加一个固定或者浮动位置的窗体,这在一些常见的Android APP中经常遇到,比如音乐播放器...

怎么将导航栏始终固定在窗口顶部,类似bootstrap 的navbar-fixed-top

http://www.myexception.cn/HTML-CSS/1964410.html 在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现div始终固定在窗口底部的代码
举报原因:
原因补充:

(最多只允许输入30个字)