六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

固定某个对象 不随滚动条

Admin | 2016-5-16 11:24:41 | ReadNums | 1298 | 标签 网页制作 | 打印本页
     

  如何让某个对象在滚动滚动条的时候,该对象始终显示在界面中,而不随着滚动条的滚动而消失,就像固定导航栏显示在顶部一样。网络上很多地方都讲过此效果,但是说的都不清楚,并且使用的冗余代码很多,应用起来比较繁杂,所以,本文在此,给大家介绍最简单的效果最好的一个例子。

  一、首先引入JS库

  <script type="text/javascript" src="jquery.js"></script>

  二、页面对象

  <div class="listymright" id="MyShowCanvas">

  这里是DIV内容

       </div>   

  三、JS代码

  <script type='text/javascript' >
  var MyTop = !1;
  var MyLeft = 0;
  $(window).bind("scroll",function()
  {
      var MyScrollTop = $(document).scrollTop();//往下滚的高度
      MyTop = MyTop ? MyTop: $("#MyShowCanvas").offset().top;
      MyLeft=$("#MyShowCanvas").offset().left;
      var sel=$("#MyShowCanvas");
      if (MyTop < MyScrollTop)
      {
          sel.css("position","fixed");
          sel.css("left", MyLeft + "px");
          sel.css("top",0 + "px");
      }
      else
      {
          sel.css("position","");
          sel.css("left","");
          sel.css("top","");
      }
  });
  </script>


问题未解决:在线咨询我要在线咨询问题

王中王彩票资料

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日