Scroll Control with Page

  • quddusaliquddus
  • Newbie
  • Newbie
  • quddusaliquddus
  • Posts: 5

Post 3+ Months Ago

Hi. How could I keep a control always showing by scrolling it down with the page? So that it always stays at the same screen position?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

JQuery's got a great solution for this. Unfortunately my example's at work and I'm not right now. If you're still in search in the morning, I'll post it for you.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Code: [ Select ]
<html>
<head>
    <script language="javascript" src="jquery_mini.js"></script>
    <script language="javascript" src="jquery.dimensions.js"></script>
    <script language="javascript">
    
     var name = "#floatMenu";
     var menuYloc = null;
    
     $(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")));
        $(window).scroll(function () {
         offset = menuYloc+$(document).scrollTop()+"px";
         $(name).animate({top:offset},{duration:500,queue:false});
        });
     });
    </script>
    
    <style type="text/css">
     body { height:2000px; }
     #floatMenu { margin-top: 100px; position:absolute; top:0px; left:100px; height: 50px; width: 200px; background-color: #ccc; border: 1px solid black; }
    </style>

</head>
<body>
    <div id="floatMenu">
     Something in here
    </div>
</body>
</html>
  1. <html>
  2. <head>
  3.     <script language="javascript" src="jquery_mini.js"></script>
  4.     <script language="javascript" src="jquery.dimensions.js"></script>
  5.     <script language="javascript">
  6.     
  7.      var name = "#floatMenu";
  8.      var menuYloc = null;
  9.     
  10.      $(document).ready(function(){
  11.         menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")));
  12.         $(window).scroll(function () {
  13.          offset = menuYloc+$(document).scrollTop()+"px";
  14.          $(name).animate({top:offset},{duration:500,queue:false});
  15.         });
  16.      });
  17.     </script>
  18.     
  19.     <style type="text/css">
  20.      body { height:2000px; }
  21.      #floatMenu { margin-top: 100px; position:absolute; top:0px; left:100px; height: 50px; width: 200px; background-color: #ccc; border: 1px solid black; }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div id="floatMenu">
  26.      Something in here
  27.     </div>
  28. </body>
  29. </html>


You'll need the jquery lib (jquery_mini in my example) and the jquery dimensions add on, found here.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 70 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.