Move/Fix a DIV element to top upon scrolling the page

Please find below a sample HTML code that fixes the position of a DIV element. Now, I need to be able to move the "setupBar" to (0,0) position (or appropriate position based on where the scroll position is) once I start scrolling and then just freeze it.

Please advise.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body>
<div id="mainBar" style="height:20px; border:1px solid red"></div>
<div id="setupBar" style="position:fixed; border:1px solid blue; height:20px; width:100%"></div>
<div style="height:1500px; background-color:#CCCCCC"></div>
</body>
</html>

Open in new window

LVL 32
ldbkuttyAsked:
Who is Participating?
 
ldbkuttyConnect With a Mentor Author Commented:
0
 
Cenjoy100Commented:
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Kiran SonawaneProject LeadCommented:
Try this

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body>
<div id="mainBar" style="height:20px; border:1px solid red"></div>
<div id="setupBar" style="position:fixed; border:1px solid blue; height:20px; width:100%;margin:-20px 0px 0px 0px;"></div>
<div style="height:1500px; background-color:#CCCCCC"></div>
</body>
</html>

Open in new window

0
 
ldbkuttyAuthor Commented:
The first link is a CSS fix which isn't what I am looking for, and the second link seems to also irrelevant :(
0
 
ldbkuttyAuthor Commented:
sonawanekiran, i'd like to adjust (and freeze) the "setupBar" according to the current scroll position is ...
0
 
Kiran SonawaneProject LeadCommented:
Here is fix using jquery

<!DOCTYPE HTML>
  <head>
    <title>Delayed Observer</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#setupBar").offset({left:e.pageX,top:e.pageY});
      });
    </script>
  </head>
  <body>
  <div id="mainBar" style="height:20px; border:1px solid red"></div>
<div id="setupBar" style="position:fixed; border:1px solid blue; height:20px; width:100%;margin:-20px 0px 0px 0px;"></div>
<div style="height:1500px; background-color:#CCCCCC"></div>
  </body>
</html>
0
 
ldbkuttyAuthor Commented:
This solution is simple, and uses plain JS ...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.