How to move fixed position_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-03 20:25 出处：网络

http://www.globalguideline.com/interview_questions/Questions.php?sc=C_Sharp_Programming_Language_Interview_Questions_A&page=6

http://www.globalguideline.com/interview_questions/Questions.php?sc=C_Sharp_Programming_Language_Interview_Questions_A&page=6

In this URL, a user sees on the left side a Twitter picture move. How to do it. What's this techni开发者_JS百科que name? How to do that?

Try to search for floating menu. There are two types: with fixed and absolute positioning. If you want similar animation as in the example then go with absolute. And if I remember it right IE6 has some issues with fixed position.

Alternatively you can go with jQuery, here is a good example with sources.

You need to hook scroll event to keep content always visible.

Hope this helps you:

<html>
<head>
    <title>fixed div</title>
    <script src="js/jquery1.4.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="div1" style="float:left;left:10px;top:10px;z-index:5000;height:50px;
           width:50px;clear:both;background-color:green;color:grey;
     font-size:300%;">O</div>
    a<br/>  b<br/>  b<br/>  d<br/>  e<br/>  f<br/>  g<br/>  h<br/>  i<br/>j<br/>
    k<br/>  l<br/>  m<br/>  n<br/>  o<br/>  p<br/>  q<br/>  r<br/>
    <script type = "text/javascript">
        $(function(){
            var left = 10;
            var top = 10;
            var d=$("#div1");
            $(window).scroll(function(){
                var t=$(window).scrollTop() + top +"px";
                d.animate({'margin-top':t},'slow');
            });
        });
    </script>
</body>
</html>