html5 固定边栏滚动特效
<script src="https://code.jquery.com/jquery.js"></script> //引入jquery
<script>
//滚动事件绑定
$(window).scroll(function() {
// $(window).scrollTop() 窗口滚动的高度
// $(window).height() 屏幕可见区域的高度
//移动高度+屏幕高度
var windowHeight = $(window).scrollTop() + $(window).height();
var sideHeight = $('#右侧边栏的id名').height();
if (windowHeight > sideHeight) {
$('#右侧边栏的id名').css({
'position' : 'fixed',
right : '0px',
top : -(sideHeight - $(window).height()) //负值
});
} else {
$('#右侧边栏的id名').css({
'position' : 'static'
});
}
});
//适应window的大小
window.onload=function() {
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
});
</script>
//设置fixed 条件判断
移动高度+屏幕高度>右侧边栏高度
越努力越幸运