拖动滚动条实时显示文字所在位置百分比-freejs.net代码演示

首页>>Jquery文字>>拖动滚动条实时显示文字所在位置百分比(2014-10-12)

拖动滚动条实时显示文字所在位置百分比

XML/HTML Code

<div id="percentageCounter"><h1>0%</h1></div>
<div class="content">
<p></p>
</p>
</div>
<script type="text/javascript" src="../../js/jquery-1.4.3.js"></script>
<script src='js/localstorage.js'></script>
<script src='js/remember_scroll.js'></script>
<script>RememberScroll.init();</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage('resize', "*");
}
</script>
<script>
$(window).scroll(function(){
// Change this to target a different percentage
var targetPercentage = 70;
//Change this to set the height of your nav bar so it hides properly. If you have a box shadow you may have to adjust this number to be height + shadow distance
var navBarHeight = 66;
//Change this to the ID of the content you are trying to show.
var targetID = "#navigation";
//Window Math
var scrollTo = $(window).scrollTop(),
docHeight = $(document).height(),
windowHeight = $(window).height();
scrollPercent = (scrollTo / (docHeight-windowHeight)) * 100;
scrollPercentscrollPercent = scrollPercent.toFixed(1);
$('#percentageCounter h1').text(scrollPercent+"%");
if(scrollPercent > targetPercentage) {
$(targetID).css({ top: '0' });
}
if(scrollPercent < targetPercentage) {
$(targetID).css({ top: '-'+navBarHeight+'px' });
}
}).trigger('scroll');
//@ sourceURL=pen.js
</script>