實現div始終固定在窗口底部的代碼

        網上實現這種功能的代碼挺多的,但有個問題,網頁如果放大的話,這個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>



發佈了20 篇原創文章 · 獲贊 5 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章