jQuery下的层的智能浮动

2016-07-07 16:02 来源：www.chinab4c.com 作者：ecshop专家

jquery-1.7.2.js 请到百度中自行下载
  1. <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
  2. <div style="height:500px;"></div>
  3. <div id="float" class="cat_cont">引用层自定义内容</div>
  4. <script type="text/javascript">
  5. $.fn.smartFloat = function() {
  6. var position = function(element) {
  7. var top = element.position().top, pos = element.css("position");
  8. $(window).scroll(function() {
  9. var scrolls = $(this).scrollTop();
  10. if (scrolls > top) {
  11. if (window.XMLHttpRequest) {
  12. element.css({
  13. position: "fixed",
  14. top: 0
  15. });
  16. } else {
  17. element.css({
  18. top: scrolls
  19. });
  20. }
  21. }else {
  22. element.css({
  23. position: "absolute",
  24. top: top
  25. });
  26. }
  27. });
  28. };
  29. return $(this).each(function() {
  30. position($(this));
  31. });
  32. };
  33. $("#float").smartFloat();//注意#float ID要与引用层定义的ID相同
  34. </script>

  36. <div style="height:2000px;">定位层自定义内容</div>
复制代码

回答：
1.自行建立一个htm 文件将共享的代码复制其中。
2.在建立的html目录中建立一个js文件夹，存放你下载的jq脚本。
3.进行测试吧。实际使用中要根据你的页面结合，配合使用。

打酱油！！！

值得学习

学习 学习