09Sep

JQ悬浮滚动,不超出顶部,不超出底部

时间: 2015-9-9 分类: HTML5+CSS3 作者:

TAGS:,

某日做页面的时候.有项目要做悬浮,类似百度百科侧边栏.

又不想下插件.好吧!

把代码记录下来自己备份用…

  1. //不超出顶部
  2. $.fn.smartFloat = function() {
  3. var position = function(element) {
  4. var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
  5. var pos = element.css("position"); //当前元素距离页面document顶部的距离
  6. $(window).scroll(function() { //侦听滚动时
  7. var scrolls = $(this).scrollTop();
  8. if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
  9. if (window.XMLHttpRequest) { //如果不是ie6
  10. element.css({ //设置css
  11. position: "fixed", //固定定位,即不再跟随滚动
  12. top: 0 //距离页面顶部为0
  13. });
  14. } else { //如果是ie6
  15. element.css({
  16. top: scrolls //与页面顶部距离
  17. });
  18. }
  19. }else {
  20. element.css({ //如果当前元素element未滚动到浏览器上边缘,则使用默认样式
  21. position: pos,
  22. // top: top
  23. });
  24. }
  25. });
  26. };
  27. return $(this).each(function() {
  28. position($(this));
  29. });
  30. };
  1. //不超出底部
  2. $.fn.testFloat = function () {
  3. var position = function(element) {
  4. var pos = element.css("position");
  5. $(window).scroll(function() {
  6. var ftop = $('#footer').offset().top;//获取底部高度
  7. var scrolls = $(this).scrollTop();//获取滚动距离
  8. var wheight = $(window).height();//获取窗口高度
  9.  
  10. if (ftop - scrolls < wheight) {
  11. element.css({
  12. bottom: wheight - ftop + scrolls + 20
  13. });
  14. }else{
  15. element.css({
  16. position: pos,
  17. bottom: 0
  18. });
  19. };
  20.  
  21. });
  22. }
  23. return $(this).each(function() {
  24. position($(this));
  25. });
  26. }
$(“.sidebar”).smartFloat();
$(“.sidebar”).testFloat();
直接调用

喜欢我们的文章请您与朋友分享:

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:泰山个人博客 >> JQ悬浮滚动,不超出顶部,不超出底部
本文地址:http://www.tais3.com/2015/978.html + 复制链接

相关文章:

Comments

目前有 0 条精彩评论

  1. 还没有任何评论,你来说两句吧

Comments
发表评论

电子邮件地址不会被公开。 * 标记为必填选项

  • 正确格式为: http://www.tais3.com