Сегодня я расскажу, как сделать строку, которая будет всегда наверху web страницы.
Я применяю этот код на одном из своих сайтов, который пока еще не открыт, так как находится в стадии разработки и наполнения начальным контентом.

Здесь я не применяю jQuery, хотя у меня была мысль переделать и выпустить в качестве плагина. Возможно, в будущем так и сделаю =)

Итак, код:

Это javasript. Сохраните под каким-нибудь именем и включите его загрузку в html код.

<!-- Begin menu
window.onerror = null;
var topMargin = 0;
var slideTime = 1000;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,right) {
 if (ns6) {
  this.obj = document.getElementById(id).style;
  this.obj.right = right;
  return this.obj;
 }
else if(ie4) {
 this.obj = document.all[id].style;
 this.obj.right = right;
 return this.obj;
}
else if(ns4) {
 this.obj = document.layers[id];
 this.obj.right = right;
 return this.obj;
}
}

   function layerSetup() {
    floatLyr = new layerObject('Layerfloat', pageWidth -180);
    window.setInterval("main()", 10)
   }

   function floatObject() {
    if (ns4 || ns6) {
     findHt = window.innerHeight;
    } else if(ie4) {
     findHt = document.body.clientHeight;
    }
   }

 function main() {
  if (ns4) {
   this.currentY = document.layers["Layerfloat"].top;
   this.scrollTop = window.pageYOffset;
   mainTrigger();
  }
  else if(ns6) {
   this.currentY = parseInt(document.getElementById('Layerfloat').style.top);
   this.scrollTop = scrollY;
   mainTrigger();
  } else if(ie4) {
   this.currentY = Layerfloat.style.pixelTop;
   this.scrollTop = document.body.scrollTop;
   mainTrigger();
  }
 }
 

function mainTrigger() {
 var newTargetY = this.scrollTop + this.topMargin;
 if ( this.currentY != newTargetY ) {
  if ( newTargetY != this.targetY ) {
   this.targetY = newTargetY;
   floatStart();
  }
  animator();
 }
}

 function floatStart() {
  var now = new Date();
  this.A = this.targetY - this.currentY;
  this.B = Math.PI / ( 2 * this.slideTime );
  this.C = now.getTime();
  if (Math.abs(this.A) > this.findHt) {
   this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + thi
   this.A = this.A > 0 ? this.findHt : -this.findHt;
  } else {
   this.D = this.currentY;
  }
 }
 
 function animator() {
  var now = new Date();
  var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C )
  newY = Math.round(newY);
  if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY
  if ( ie4 )document.all.Layerfloat.style.pixelTop = newY;
  if ( ns4 )document.layers["Layerfloat"].top = newY;
  if ( ns6 )document.getElementById('Layerfloat').style.top = newY +
 }
}

function start() {
 if(ns6||ns4) {
  pageWidth = innerWidth;
  pageHeight = innerHeight;
  layerSetup();
  floatObject();
} else if(ie4) {
 pageWidth = document.body.clientWidth;
 pageHeight = document.body.clientHeight;
 layerSetup();
 floatObject();
}
}
                     //  End -->

Длаее делаем div:

<div id=Layerfloat class=\"topmenudiv\" style=" position: absolute; top: 0;
width: 100%; z-index: 1000; left: 0">
    <table border=0 width="100%" bgcolor="#00DDFF" 
background="/img/partner/gradient.gif">
     <TMPL_VAR NAME=TOPSTRING>
    </table>
   </div>

В этот div Вы можете помещать всё, что угодно, но я поместил картинку с градиентом в таблицу. Получилось красиво. В итоге заказчик очень рад.

А теперь вопрос: Для чего это может пригодиться?
Мой ответ: С помощью этого можно сделать одно из самых дорогих рекламных мест на сайте. Реклама всегда будет наверху!
Ваш ответ:

Популярность: 18%