肥宅综合社区-做一个优雅文明的综合社区

我要注册

搜索内容

超长网页如何让右侧DIV跟随滚动窗口往下滚动？

2023-09-24 555阅读 14评论

  1. document

  3. *{ margin:0; padding:0;}
  4. body { font:12px/1.8 Arial; color:#666;}
  5. h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
  6. .go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
  7. .wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}

  9. .demo { height:1500px; }
  10. .float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
  11. .float .close-ico{ position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; }






  18. /**
  19. * @author 愚人码头
  20. * 类似于新浪微博新消息提示的定位框
  21. * 更多
  22. */
  23. (function($){
  24.     $.fn.capacityFixed = function(options) {
  25.         var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
  26.         var FixedFun = function(element) {
  27.             var top = opts.top;
  28.             var right = ($(window).width()-opts.pageWidth)/2+opts.right;
  29.             element.css({
  30.                 "right":right,
  31.                 "top":top
  32.             });
  33.             $(window).resize(function(){
  34.                 var right = ($(window).width()-opts.pageWidth)/2+opts.right;
  35.                 element.css({
  36.                     "right":right
  37.                 });
  38.             });
  39.             $(window).scroll(function() {
  40.                 var scrolls = $(this).scrollTop();
  41.                 if (scrolls > top) {

  43.                     if (window.XMLHttpRequest) {
  44.                         element.css({
  45.                             position: "fixed",
  46.                             top: 0                           
  47.                         });
  48.                     } else {
  49.                         element.css({
  50.                             top: scrolls
  51.                         });
  52.                     }
  53.                 }else {
  54.                     element.css({
  55.                         position: "absolute",
  56.                         top: top
  57.                     });
  58.                 }
  59.             });
  60.             element.find(".close-ico").click(function(event){
  61.                 element.remove();
  62.                 event.preventDefault();
  63.             })
  64.         };
  65.         return $(this).each(function() {
  66.             FixedFun($(this));
  67.         });
  68.     };
  69.     $.fn.capacityFixed.deflunt={
  70.         right : 100,//相对于页面宽度的右边定位
  71.         top:150,
  72.         pageWidth : 960
  73.     };
  74. })(jQuery);




  79.     你是谁

  81. 哥是来占位的
  82. 哥是来占位的
  83. 哥是来占位的
  84. 哥是来占位的
  85. 哥是来占位的
  86. 哥是来占位的
  87. 哥是来占位的
  88. 哥是来占位的
  89. 哥是来占位的
  90. 哥是来占位的
  91. 哥是来占位的
  92. 哥是来占位的
  93. 哥是来占位的
  94. 哥是来占位的
  95. 哥是来占位的
  96. 哥是来占位的
  97. 哥是来占位的
  98. 哥是来占位的
  99. 哥是来占位的
  100. 哥是来占位的
  101. 哥是来占位的
  102. 哥是来占位的
  103. 哥是来占位的
  104. 哥是来占位的
  105. 哥是来占位的
  106. 哥是来占位的
  107. 哥是来占位的
  108. 哥是来占位的
  109. 哥是来占位的
  110. 哥是来占位的
  111. 哥是来占位的
  112. 哥是来占位的
  113. 哥是来占位的
  114. 哥是来占位的
  115. 哥是来占位的
  116. 哥是来占位的
  117. 哥是来占位的
  118. 哥是来占位的
  119. 哥是来占位的
  120. 哥是来占位的
  121. 哥是来占位的
  122. 哥是来占位的

  124. $("#float").capacityFixed();

  126.      







文章版权声明：本站部分内容系网络转载,如果文章触发到您的利益或版权，请联系本站客服邮箱kefu@fz331.com删除，我们将48小时之内删除。

发表评论

上传附件：
评论列表 （有 14 条评论，555人围观）
网友昵称：肥宅
肥宅V铁粉
2023-09-27 回复
aaaaaaaaaaaaaa
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
@肥宅
我想对你说:
测试看看啊
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
收拾收拾收拾收拾收拾收拾收拾
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
撒啊啊啊啊啊啊啊啊啊啊啊啊啊
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
@肥宅
我想对你说:
1111111111111111
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
@肥宅,[br]我想对你说:[br]aaaaaaaaaaaaaaa
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
@肥宅aaaaaaaaaaaa
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
@aaaaaaaaaaaaa
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
sssssssssss
网友昵称：肥宅
肥宅V铁粉
2023-09-25 回复
1111111111111
切换注册

登录

忘记密码?

切换登录

注册

验证码

导航分类