当滚动条位于底部时,我试图使宽度DIV增长到100%, 当滚动条位于页面顶部时缩小到0%。
我试着这样做:
$(document).ready(function () {
var myWidth = $(window).width();
var res = myWidth / 100;
var myHeight = $(document).height();
var myScreen = $(window).height();
$(window).scroll(function () {
var scrolling = $(window).scrollTop();
var myPrecentage = (scrolling + myScreen) / (myHeight );
console.log(myPrecentage);
$('#com1').css("width", ((myPrecentage) * 100) + "%");
});
});
我遇到了一个问题,当我尝试使用scrollTop时,它不会计算屏幕高度,因此当scrollTop为0时,我总是开始,约为宽度的20%。
你有更好的想法如何解决它?
答案 0 :(得分:2)
我可能还没有完全理解你想要做什么,但听起来你想根据你在滚动中的位置计算0到100%之间的%。 (也许您希望将垂直动作转换为水平图形表示。)
您的代码有效,只需稍作调整即可。现在你正在根据以下方式计算%:
var myPrecentage = (scrolling + myScreen) / (myHeight );
你想要的是:
var myPrecentage = scrolling / (myHeight - myScreen);
与...相同:
$(window).scrollTop() / ($(document).height() - $(window).height());
(我应该补充一点,我正在使用Chrome - 不同浏览器的行为可能不同。)
答案 1 :(得分:0)
我认为你当前的问题是你总是从视图窗口的大小开始。因此,除非视图为0,否则您将始终以<零号。您只想在滚动视图超出myScreen大小时添加滚动和自选画面。
http://jsfiddle.net/ufomammut66/C2aFH/
var myPrecentage;
if((scrolling - myScreen) < myScreen){
myPrecentage = (scrolling) / (myHeight );
} else {
myPrecentage = (scrolling + myScreen) / (myHeight );
}