Set div position in page scroll action in JavaScript

Description

The following code shows how to set div position in page scroll action.

Example


<html>
<head>
<script type="text/javascript">
window.onscroll = function () {<!--from w  w w .  j  av a2s  .com-->
var oWatermark = document.getElementById("divWatermark");
oWatermark.style.top = document.body.scrollTop;
}
</script>
</head>
<body>
<P>Try scrolling this window.</p>
<div id="divWatermark" style="position: absolute; top: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">www.java2s.com</div>
<P>Line 1</p>
<P>Line 2</p>
<P>Line 3</p>
<P>Line 4</p>
<P>Line 5</p>
<P>Line 6</p>
<P>Line 7</p>
<P>Line 8</p>
<P>Line 9</p>
<P>Line 10</p>
<P>Line 11</p>
<P>Line 12</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set div position in page scroll action in JavaScript

Home »
  Javascript Tutorial »
    Style »
      Layout

Javascript Tutorial Layout
Add padding to a HTML element in JavaScript
Change height in JavaScript
Change left in JavaScript
Change padding bottom in JavaScript
Change padding left in JavaScript
Change padding right in JavaScript
Change padding top in JavaScript
Change position in JavaScript
Change right in JavaScript
Change top in JavaScript
Change width in JavaScript

Set div position in page scroll action in JavaScript

Description

Example

Set div position in page scroll action in J...