Code666 (代码贴、代码片段)

[JavaScript] 根据滚动条移动的菜单 →→→→→进入此内容的聊天室

来自 , 2019-03-20, 写在 JavaScript, 查看 145 次.
URL http://www.code666.cn/view/967990de
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4.         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  5.         <head>
  6.                 <title>使用JQuery实现一个图片随着滚动条滚动而滚动</title>
  7.                 <style type="text/css">
  8.                         *{
  9.                                 margin: 0px;
  10.                                 padding: 0px;
  11.                         }
  12.                         #pic
  13.                         {
  14.                                 background:url("share.png");
  15.                                 width:24px;
  16.                                 height:88px;
  17.                                 position:absolute;
  18.                         }
  19.                 </style>
  20.         </head>
  21.         <script type="text/javascript" src="../jquery-1.8.3.js"></script>
  22.  
  23.         <script type="text/javascript">
  24.        
  25.         $(document).ready(function() {
  26.                
  27.                 //alert($(window).height()); //浏览器时下窗口可视区域高度(JQuery的获取方式)
  28.                 //alert(document.documentElement.clientHeight);(JS的获取方式)
  29.                
  30.                 (function()
  31.                 {
  32.                         var positionY = ($(window).height() - $("#pic").height())/2;
  33.                         //alert(positionY);
  34.                         $("#pic").css("top",positionY);
  35.                         $(window).scroll(function(event){
  36.                                 var scrollValue  = document.documentElement.scrollTop || document.body.scrollTop;
  37.                                 //alert(scrollValue);
  38.                                 var topValue = scrollValue + positionY;
  39.                                 $("#pic").css("top",topValue+"px");
  40.                         })     
  41.                 })();
  42.                 /*
  43.                 $(window).scroll(function(event){
  44.                         $("#pic").css("top",document.documentElement.scrollTop+$("#pic")[0].style.top);
  45.                 })
  46.                 */
  47.         });
  48.    
  49.         </script>
  50.         <body id="body">
  51.                 <div id="pic"></div>
  52.                 <div id="content"></div>
  53.                 <br /><br /><br /><br /><br /><br /><br />
  54.                 <br /><br /><br /><br /><br /><br /><br />
  55.                 <br /><br /><br /><br /><br /><br /><br />
  56.                 <br /><br /><br /><br /><br /><br /><br />
  57.                 <br /><br /><br /><br /><br /><br /><br />
  58.                 <br /><br /><br /><br /><br /><br /><br />
  59.                 <br /><br /><br /><br /><br /><br /><br />
  60.                 <br /><br /><br /><br /><br /><br /><br />
  61.                 <br /><br /><br /><br /><br /><br /><br />
  62.                 <br /><br /><br /><br /><br /><br /><br />
  63.                 <br /><br /><br /><br /><br /><br /><br />
  64.                 <br /><br /><br /><br /><br /><br /><br />
  65.                 <br /><br /><br /><br /><br /><br /><br />
  66.                 <br /><br /><br /><br /><br /><br /><br />
  67.                 <br /><br /><br /><br /><br /><br /><br />
  68.                 <br /><br /><br /><br /><br /><br /><br />
  69.                 <br /><br /><br /><br /><br /><br /><br />
  70.                 <br /><br /><br /><br /><br /><br /><br />
  71.                 <br /><br /><br /><br /><br /><br /><br />
  72.                 <br /><br /><br /><br /><br /><br /><br />
  73.                 <br /><br /><br /><br /><br /><br /><br />
  74.                 <br /><br /><br /><br /><br /><br /><br />
  75.                 <br /><br /><br /><br /><br /><br /><br />
  76.                 <br /><br /><br /><br /><br /><br /><br />
  77.                 <br /><br /><br /><br /><br /><br /><br />
  78.         </body>
  79. </html>
  80.  

回复 "根据滚动条移动的菜单"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666