jsp页面中数据随屏幕滚动加载如何实现

JavaScript010

jsp页面中数据随屏幕滚动加载如何实现,第1张

你这个要求,跟jsp基本无关了,就是前台展现的方式,ajax获取json格式的数据后,将数据放在一个数组中,每次取10条(多少自己定),取完之后在页面显示,同时从数组中删除,这样就不会重复加载了。

前台写一个js方法,判断当前页面高度、屏幕高度、鼠标滚轮位置,根据这三个值来判断是否需要加载下一页数据。

以下代码使用jQuery

var pageH = $(document.body).height()

var scrollT = $(window).scrollTop()

var winH = $(window).height()

var rat = (pageH - winH - scrollT)/winH

当rat小于一个值时(自己定,可以设置成0.01或者0.02),则加载下一页数据。或者显示一个“加载下一页”的按钮,点击后加载下一页的数据,当判断所有数据都加载完毕后,重新到后台获取新的数据。

完全用CSS控制就可以了,页面在滚动,给这个DIV设置position:fixed那么页面不管怎么滚动,这个DIV是中在顶端

解决方案二:

显示合作div absolute定位,判断滚动到div位置的时候设置position为fixed,同时设置top为0

<div style="height:500pxbackground:#999"></div>

<div id="fixedMenu" style="background:#eeewidth:100%">我是菜单,我到页头会固定</div>

<div style="height:900pxbackground:#999"></div>

<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>

<script type="text/javascript">

$(function () {

var ie6 = /msie 6/i.test(navigator.userAgent)

, dv = $('#fixedMenu'), st

dv.attr('otop', dv.offset().top)//存储原来的距离顶部的距离

$(window).scroll(function () {

st = Math.max(document.body.scrollTop || document.documentElement.scrollTop)

if (st >= parseInt(dv.attr('otop'))) {

if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果

dv.css({ position: 'absolute', top: st })

}

else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 })

} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' })

})

})

</script>

解决方案三:

对页面y轴偏移量进行判断,如果大于某个值(具体情况具体应对),克隆原来的层,设置新的id,新的id意味着新的css样式:position:fixed,然后隐藏原来的层,添加克隆的层; 否则,即向上滑动到一定位置时,remove克隆的层,显示隐藏的层,达到目的~代码仅供参考。。。

$(window).scroll(function(){

if(window.pageYOffset>108){

if($("#topbar").length == 0){

var x=$("#wrap_most_used_bookmark").clone()

x.attr("id","topbar")

$("body").append(x)

$("#return_top").fadeIn()

}

}

else{

$("#topbar").remove()

$("#return_top").fadeOut()

}

})