Back To Website Design Forum

Scroll Control with Page

Post June 28th, 2009, 10:53 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 28th, 2009, 10:53 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Mastermind
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2497
  • Loc: Nashville, TN
  • Status: Offline

Post June 28th, 2009, 12:14 pm

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.
I'd love to change the world, but they won't give me the source code.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Mastermind
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2497
  • Loc: Nashville, TN
  • Status: Offline

Post June 29th, 2009, 7:39 am

Code: [ Download ] [ 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>
  24. </head>
  25. <body>
  26.     <div id="floatMenu">
  27.      Something in here
  28.     </div>
  29. </body>
  30. </html>


You'll need the jquery lib (jquery_mini in my example) and the jquery dimensions add on, found here.
I'd love to change the world, but they won't give me the source code.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 144 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
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.