Position: Fixed; Средствами Js

DjTarik · September 10, 2010

Задача:

Нужно сделать position: fixed; на JS.

А конкретно - расположить див поверх всего в верхней части окна.

Решил взять за основу position: absolute; и скриптом отсчитывать координаты.

Как-то так:

width: 100%;
height: 30px;
position: absolute;
left: 0;
top: 0;
z-index: 100;

obj.style.top = document.getElementsByTagName('html')[0].scrollTop + "px";

Проблема:

Прокрутка. Что можно сделать, чтобы учитывать прокрутку колесом мыши, тяганием скролла и т.д. Или у меня изначально неверный подход?

Great Rash · September 10, 2010

А вот так не пойдет?

Scrum · September 10, 2010

зачем JS ? можно и без него.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <style type="text/css">
  /*<![CDATA[*/
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #393939;
    color: #fff;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    border: 0;
  }
  #head {
    background: #404040;
    color: orange;
    position: fixed;
    width: 100%;
    height: 50px;
  }
  #head p {
    color: #fff;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
  }
  #content {
    height: 2000px;
    padding: 50px 0 0 0;
  }


  /*]]>*/
  </style>
<!--[if lt IE 7]>
<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        overflow: auto;
    }
    #head {
        position: relative;
        width: auto;
    }
    #content {
        padding: 0;
    }
</style>
 <![endif]-->
</head>
<body>
    <div id="head">
        HTML & CSS2
    </div>
    <div id="content">
        more text
    </div>

</body>

</html>

DjTarik · September 11, 2010

А вот так не пойдет?

зачем JS ? можно и без него.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <style type="text/css">
  /*<![CDATA[*/
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #393939;
    color: #fff;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    border: 0;
  }
  #head {
    background: #404040;
    color: orange;
    position: fixed;
    width: 100%;
    height: 50px;
  }
  #head p {
    color: #fff;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
  }
  #content {
    height: 2000px;
    padding: 50px 0 0 0;
  }


  /*]]>*/
  </style>
<!--[if lt IE 7]>
<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        overflow: auto;
    }
    #head {
        position: relative;
        width: auto;
    }
    #content {
        padding: 0;
    }
</style>
 <![endif]-->
</head>
<body>
    <div id="head">
        HTML & CSS2
    </div>
    <div id="content">
        more text
    </div>

</body>

</html>

Ребята, я прекрасно знаю все эти способы) Верстаю не первый год. Тут вся задача именно в том, как это замутить на JS. Другие решения не интересуют.

Scrum · September 11, 2010

тогда клацаем сюда

DjTarik · September 11, 2010

тогда клацаем сюда

И что именно мне там смотреть? (где-то пол года назад читал это всё, есть в закладках =). Про то как выяснить высоту и смещение я знаю.

Как отследить прокрутку колёсиком и скроллом?

Scrum · September 11, 2010

Как узнать на сколько прокручен документ (scrollLeft, scrollTop)? Почему scrollLeft, scrollTop всегда равны нулю? Как прокрутить содержимое окна документа?

DjTarik · September 11, 2010

Как узнать на сколько прокручен документ (scrollLeft, scrollTop)? Почему scrollLeft, scrollTop всегда равны нулю? Как прокрутить содержимое окна документа?

Там только про то, как узнать координаты и размеры. Мою задачу не решает.

Edited September 11, 2010 by DjTarik

Scrum · September 11, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html, body, p {
margin: 0;
}
div#head {
height: 50px;
background: #404040;
color: orange;
position: absolute;
width: 100%;
}
div#content {
padding: 50px 0 0 0;
}
p {
text-align: justify;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

window.onscroll = function ()
{
var scrollTop = document.documentElement.scrollTop;
document.getElementById('head').style.top = scrollTop + "px";
}

/*]]>*/
</script>
</head>

<body>
<div id="head">position fixed</div>
<div id="content">
<p>Suspendisse hendrerit, ante cursus fringilla pretium, urna metus aliquet orci, a malesuada felis turpis eget mi. Aliquam rutrum molestie scelerisque? Suspendisse eu nunc vitae mi euismod malesuada ut congue diam. Integer ullamcorper, risus quis ultrices euismod, est erat gravida eros, ut congue felis nulla ut eros. Ut dapibus, ligula id euismod venenatis, sapien odio consequat velit, eget varius ante urna eget enim? Nulla quis imperdiet elit. Nulla eget metus sapien. Maecenas vehicula orci at nulla congue dapibus. Aenean tempor iaculis velit a viverra. Nulla placerat nisi non libero facilisis commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod tellus a mi ullamcorper pharetra. Duis suscipit congue sapien, ut interdum quam placerat in. Nunc quam diam; condimentum ut pretium et; convallis ac velit. Nullam vitae vulputate ante.

Vestibulum augue nunc, convallis non ultrices eu, tincidunt id turpis? Praesent nec nisi nec dolor facilisis accumsan. Praesent id lorem vel sem rutrum condimentum id vel mi! Etiam fermentum tincidunt leo; vel tincidunt tortor ornare nec. Etiam dictum pulvinar diam, in tempor magna dictum at. Sed sed augue a urna consectetur lacinia? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec arcu libero? Integer id consequat augue. Ut mi tellus, pulvinar eget luctus eget, luctus a augue. Nulla facilisi. Quisque lorem massa, vestibulum sed accumsan quis, hendrerit vel nulla. Vestibulum et dapibus lectus. Praesent a elit nisi. In mattis elit ac velit congue viverra. Vestibulum feugiat ligula metus, at congue lorem. Nullam pharetra quam nec est fermentum facilisis. Vivamus vel enim felis; eget ultrices velit. Phasellus pretium volutpat massa in facilisis.

Fusce lorem arcu, euismod nec commodo quis, tincidunt et velit. Praesent ut dolor nisl, sit amet varius lacus. Mauris gravida, diam eu commodo malesuada, felis lectus imperdiet eros, at dignissim augue ligula vitae est. Nam accumsan, lectus et euismod imperdiet, leo ligula vestibulum felis, et tincidunt massa turpis bibendum neque. Pellentesque tempus fringilla erat. Praesent faucibus volutpat placerat? Duis fringilla euismod euismod. Suspendisse lacinia dolor vel nisi vestibulum quis lacinia odio sagittis. Donec ornare vulputate dui eget convallis. Nulla pulvinar nisi eu leo feugiat bibendum! Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla felis lacus, interdum eu cursus in, euismod eget libero. Cras sit amet dolor id lacus blandit tincidunt tempor eget augue. Vestibulum a lectus non odio facilisis volutpat.
</p>
<p>Suspendisse hendrerit, ante cursus fringilla pretium, urna metus aliquet orci, a malesuada felis turpis eget mi. Aliquam rutrum molestie scelerisque? Suspendisse eu nunc vitae mi euismod malesuada ut congue diam. Integer ullamcorper, risus quis ultrices euismod, est erat gravida eros, ut congue felis nulla ut eros. Ut dapibus, ligula id euismod venenatis, sapien odio consequat velit, eget varius ante urna eget enim? Nulla quis imperdiet elit. Nulla eget metus sapien. Maecenas vehicula orci at nulla congue dapibus. Aenean tempor iaculis velit a viverra. Nulla placerat nisi non libero facilisis commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod tellus a mi ullamcorper pharetra. Duis suscipit congue sapien, ut interdum quam placerat in. Nunc quam diam; condimentum ut pretium et; convallis ac velit. Nullam vitae vulputate ante.

Vestibulum augue nunc, convallis non ultrices eu, tincidunt id turpis? Praesent nec nisi nec dolor facilisis accumsan. Praesent id lorem vel sem rutrum condimentum id vel mi! Etiam fermentum tincidunt leo; vel tincidunt tortor ornare nec. Etiam dictum pulvinar diam, in tempor magna dictum at. Sed sed augue a urna consectetur lacinia? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec arcu libero? Integer id consequat augue. Ut mi tellus, pulvinar eget luctus eget, luctus a augue. Nulla facilisi. Quisque lorem massa, vestibulum sed accumsan quis, hendrerit vel nulla. Vestibulum et dapibus lectus. Praesent a elit nisi. In mattis elit ac velit congue viverra. Vestibulum feugiat ligula metus, at congue lorem. Nullam pharetra quam nec est fermentum facilisis. Vivamus vel enim felis; eget ultrices velit. Phasellus pretium volutpat massa in facilisis.

Fusce lorem arcu, euismod nec commodo quis, tincidunt et velit. Praesent ut dolor nisl, sit amet varius lacus. Mauris gravida, diam eu commodo malesuada, felis lectus imperdiet eros, at dignissim augue ligula vitae est. Nam accumsan, lectus et euismod imperdiet, leo ligula vestibulum felis, et tincidunt massa turpis bibendum neque. Pellentesque tempus fringilla erat. Praesent faucibus volutpat placerat? Duis fringilla euismod euismod. Suspendisse lacinia dolor vel nisi vestibulum quis lacinia odio sagittis. Donec ornare vulputate dui eget convallis. Nulla pulvinar nisi eu leo feugiat bibendum! Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla felis lacus, interdum eu cursus in, euismod eget libero. Cras sit amet dolor id lacus blandit tincidunt tempor eget augue. Vestibulum a lectus non odio facilisis volutpat.
</p>
<p>Suspendisse hendrerit, ante cursus fringilla pretium, urna metus aliquet orci, a malesuada felis turpis eget mi. Aliquam rutrum molestie scelerisque? Suspendisse eu nunc vitae mi euismod malesuada ut congue diam. Integer ullamcorper, risus quis ultrices euismod, est erat gravida eros, ut congue felis nulla ut eros. Ut dapibus, ligula id euismod venenatis, sapien odio consequat velit, eget varius ante urna eget enim? Nulla quis imperdiet elit. Nulla eget metus sapien. Maecenas vehicula orci at nulla congue dapibus. Aenean tempor iaculis velit a viverra. Nulla placerat nisi non libero facilisis commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod tellus a mi ullamcorper pharetra. Duis suscipit congue sapien, ut interdum quam placerat in. Nunc quam diam; condimentum ut pretium et; convallis ac velit. Nullam vitae vulputate ante.

Vestibulum augue nunc, convallis non ultrices eu, tincidunt id turpis? Praesent nec nisi nec dolor facilisis accumsan. Praesent id lorem vel sem rutrum condimentum id vel mi! Etiam fermentum tincidunt leo; vel tincidunt tortor ornare nec. Etiam dictum pulvinar diam, in tempor magna dictum at. Sed sed augue a urna consectetur lacinia? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec arcu libero? Integer id consequat augue. Ut mi tellus, pulvinar eget luctus eget, luctus a augue. Nulla facilisi. Quisque lorem massa, vestibulum sed accumsan quis, hendrerit vel nulla. Vestibulum et dapibus lectus. Praesent a elit nisi. In mattis elit ac velit congue viverra. Vestibulum feugiat ligula metus, at congue lorem. Nullam pharetra quam nec est fermentum facilisis. Vivamus vel enim felis; eget ultrices velit. Phasellus pretium volutpat massa in facilisis.

Fusce lorem arcu, euismod nec commodo quis, tincidunt et velit. Praesent ut dolor nisl, sit amet varius lacus. Mauris gravida, diam eu commodo malesuada, felis lectus imperdiet eros, at dignissim augue ligula vitae est. Nam accumsan, lectus et euismod imperdiet, leo ligula vestibulum felis, et tincidunt massa turpis bibendum neque. Pellentesque tempus fringilla erat. Praesent faucibus volutpat placerat? Duis fringilla euismod euismod. Suspendisse lacinia dolor vel nisi vestibulum quis lacinia odio sagittis. Donec ornare vulputate dui eget convallis. Nulla pulvinar nisi eu leo feugiat bibendum! Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla felis lacus, interdum eu cursus in, euismod eget libero. Cras sit amet dolor id lacus blandit tincidunt tempor eget augue. Vestibulum a lectus non odio facilisis volutpat.
</p>
<p>Suspendisse hendrerit, ante cursus fringilla pretium, urna metus aliquet orci, a malesuada felis turpis eget mi. Aliquam rutrum molestie scelerisque? Suspendisse eu nunc vitae mi euismod malesuada ut congue diam. Integer ullamcorper, risus quis ultrices euismod, est erat gravida eros, ut congue felis nulla ut eros. Ut dapibus, ligula id euismod venenatis, sapien odio consequat velit, eget varius ante urna eget enim? Nulla quis imperdiet elit. Nulla eget metus sapien. Maecenas vehicula orci at nulla congue dapibus. Aenean tempor iaculis velit a viverra. Nulla placerat nisi non libero facilisis commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod tellus a mi ullamcorper pharetra. Duis suscipit congue sapien, ut interdum quam placerat in. Nunc quam diam; condimentum ut pretium et; convallis ac velit. Nullam vitae vulputate ante.

Vestibulum augue nunc, convallis non ultrices eu, tincidunt id turpis? Praesent nec nisi nec dolor facilisis accumsan. Praesent id lorem vel sem rutrum condimentum id vel mi! Etiam fermentum tincidunt leo; vel tincidunt tortor ornare nec. Etiam dictum pulvinar diam, in tempor magna dictum at. Sed sed augue a urna consectetur lacinia? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec arcu libero? Integer id consequat augue. Ut mi tellus, pulvinar eget luctus eget, luctus a augue. Nulla facilisi. Quisque lorem massa, vestibulum sed accumsan quis, hendrerit vel nulla. Vestibulum et dapibus lectus. Praesent a elit nisi. In mattis elit ac velit congue viverra. Vestibulum feugiat ligula metus, at congue lorem. Nullam pharetra quam nec est fermentum facilisis. Vivamus vel enim felis; eget ultrices velit. Phasellus pretium volutpat massa in facilisis.

Fusce lorem arcu, euismod nec commodo quis, tincidunt et velit. Praesent ut dolor nisl, sit amet varius lacus. Mauris gravida, diam eu commodo malesuada, felis lectus imperdiet eros, at dignissim augue ligula vitae est. Nam accumsan, lectus et euismod imperdiet, leo ligula vestibulum felis, et tincidunt massa turpis bibendum neque. Pellentesque tempus fringilla erat. Praesent faucibus volutpat placerat? Duis fringilla euismod euismod. Suspendisse lacinia dolor vel nisi vestibulum quis lacinia odio sagittis. Donec ornare vulputate dui eget convallis. Nulla pulvinar nisi eu leo feugiat bibendum! Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla felis lacus, interdum eu cursus in, euismod eget libero. Cras sit amet dolor id lacus blandit tincidunt tempor eget augue. Vestibulum a lectus non odio facilisis volutpat.
</p>
</div>
</body>

</html>

Да же так.

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

и куда все время пропадает кнопка редактировать ((

DjTarik · September 13, 2010


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html, body, p {
    margin: 0;
  }
  div#head {
    height: 50px;
    background: #404040;
    color: orange;
    position: absolute;
    width: 100%;
  }
  div#content {
    padding: 50px 0 0 0;
  }
  p {
    text-align: justify;
  }
  /*]]>*/
  </style>
  <script language="JavaScript" type="text/javascript">
  /*<![CDATA[*/

      window.onscroll = function ()
      {
       var scrollTop = document.documentElement.scrollTop;
       document.getElementById('head').style.top = scrollTop + "px";
      }

  /*]]>*/
  </script>
</head>

<body>
    <div id="head">position fixed</div>
    <div id="content">
    <p>Suspendisse hendrerit...</p>
</div>
</body>

</html>

Да же так.

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

и куда все время пропадает кнопка редактировать ((

Да, именно это событие мне и надо. Спасибо, теперь всё понял.

Только осталось продумать, почему дергается так заметно)

Sign In

Position: Fixed; Средствами Js

Question

DjTarik

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information