很久之前接触js的时候就遇到过这个问题,当时老是给出的答案是使用固定定位,今天写页面突然又遇到了这个问题,感觉很差异,于是有了下面的解决办法
// 右侧工具栏固定
var toolTop = $('.rightTool').offset().top; //定位工具栏的距离顶部的距离
var bodyH = $('body').height(); //body的高度
// 判断浏览器
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
}; //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
}
window.onscroll = function (e) {
var scrollT = $(window).scrollTop() || $('body').scrollTop();
if ($(window).height() <= (toolTop + $('.rightTool').height())) { //当工具栏大于屏幕的高度的时候让其底部显示在工具栏的底部,这样就不会无限撑大body的高度了
$('.rightTool').css({
'top': $(window).height() - $('.rightTool').height() + $(window).scrollTop() - 8
})
} else {
$('.rightTool').css('top', toolTop + scrollT);
}
if (myBrowser()=="Chrome"){ //目前只发现chrome有无限下滑的现象,已反馈(但不知道人家能不能给解决哈哈)所以多次测试发现多给个235的高度能解决
if ($(window).height() + scrollT >= (bodyH + 235)) {
$(window).scrollTop(bodyH - $(window).height() + 235);
}
}
}
上面这个代码有时会停在一半不能下滑,于是,又改了一下,
window.onscroll = function (e) {
var scrollT = $(window).scrollTop() || $('body').scrollTop();
if (window.innerHeight <= (toolTop + $('.rightTool').height())) {
$('.rightTool').css({
'top': $(window).height() - $('.rightTool').height() + $(window).scrollTop() - 8
})
} else {
$('.rightTool').css('top', toolTop + scrollT);
}
console.log('文档高度'+bodyH)
console.log('窗口高度'+window.innerHeight)
console.log('滚动高度'+scrollT)
console.log(bodyH-window.innerHeight - scrollT+252)
if (myBrowser()=="Chrome"){
if (bodyH-window.innerHeight - scrollT+252 <= 0) {
var nowVal = bodyH-window.innerHeight - scroll+240;
$(window).scrollTop(nowVal);
}
}
}
浏览器计算出来的结果是有误差的,所有有时候我们要做好防止这些误差的准备
当前chrome版本:版本 62.0.3202.94(正式版本) (64 位)
我现在用的其他浏览器未发现此现象
由于页面内容较多,容易发生第一次获取文档高度不正确的情况,并且body的高度如果直接获取的话也会出现问题,所以,决定做如下改良
1、把固定高度的元素放在一个和body相同高度的另一个盒子中
<!-- 右侧工具框 -->
<div id="rightZone" style="position:absolute;top:0;right:0;height:100%;width:0">
<ul class="rightTool list-unstyled text-info text-center">
<li>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=767521025&site=qq&menu=yes">
<img src="{IMG_PATH}qiphon/qq.png" alt="QQ咨询">
</a>
<p>QQ咨询</p>
</li>
<li class="totop">
<a href="javascript:scroll(0,0)">
<img src="{IMG_PATH}qiphon/totop.png" alt="回到顶部">
</a>
<p>回到顶部</p>
</li>
</ul>
</div>
2、在页面滚动的时候,不断获取页面的高度
$(function(){
$(window).scroll(function (e) {
//body的高度
var bodyH = $('#rightZone').height();
var scrollT = $(window).scrollTop() || $('body').scrollTop();
//右侧工具栏高度
var toolH = $('.rightTool').height();
//窗口高度
var winH = window.innerHeight;
if (winH <= (toolTop + toolH)) {
$('.rightTool').css({
'top': winH - toolH + scrollT - 8
})
if (bodyH-winH - scrollT<= 0) {
var nowVal = bodyH-winH;
$(window).scrollTop(nowVal);
}
} else {
$('.rightTool').css('top', toolTop + scrollT);
}
})
});
这样就能避免body元素的高度获取不正确了