使用js与jquery获取滚动条距离浏览器顶部的距离

最近在仿一个网站的前端页面的时候遇到,需要在滚动条滚动到一定位置的时候固定顶部导航栏,所以查了查资料,在这里整理了一下:

    1、使用js获取的相关方法 收藏代码

  1. //回到页面顶部  
  2.     $("#goTotop").click(function(){  
  3.         $('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部  
  4.     });  
  5.       
  6.     $(window).scroll(function() {  
  7.         var yheight1=window.pageYOffset; //滚动条距顶端的距离  
  8.         var yheight=getScrollTop(); //滚动条距顶端的距离  
  9.         var height =document.documentElement.clientHeight//浏览器可视化窗口的大小  
  10.         var top=parseInt(yheight)+parseInt(height)-217;  
  11.         var divobj=$(".kf");  
  12.         divobj.attr('style','top:'+top+'px;');  
  13.     })  
  14.       
  15. /** 
  16.  * 获取滚动条距离顶端的距离 
  17.  * @return {}支持IE6 
  18.  */  
  19. function getScrollTop() {  
  20.         var scrollPos;  
  21.         if (window.pageYOffset) {  
  22.         scrollPos = window.pageYOffset; }  
  23.         else if (document.compatMode && document.compatMode != 'BackCompat')  
  24.         { scrollPos = document.documentElement.scrollTop; }  
  25.         else if (document.body) { scrollPos = document.body.scrollTop; }   
  26.         return scrollPos;   
  27. }  

 getScrollTop()使用这个方法在IE、谷歌和火狐上都能获取。

 2、使用jQuery获取的相关方法

  1. jquery 获取滚动条高度  
  2.   
  3. 获取浏览器显示区域的高度 :   $(window).height();   
  4. 获取浏览器显示区域的宽度 :$(window).width();   
  5. 获取页面的文档高度 :  $(document).height();   
  6. 获取页面的文档宽度 :  $(document).width();    
  7. 获取滚动条到顶部的垂直高度 : $(document).scrollTop();   
  8. 获取滚动条到左边的垂直宽度 :$(document).scrollLeft();  
  9. 计算元素位置和偏移量:  $(id).offset();  
  10.         offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。  


以上内容都是在网上搜集而来,将之汇总以供有需要的人使用。

本博客所有文章如无特别注明均为原创。作者:张辰复制或转载请以超链接形式注明转自 张大叔博客
原文地址《使用js与jquery获取滚动条距离浏览器顶部的距离
分享到:更多

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)