html5 固定邊欄滾動特效
阿新 • • 發佈:2017-09-15
設置 stat 移動 osi http col spa span 條件判斷
<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 條件判斷
移動高度+屏幕高度>右側邊欄高度
html5 固定邊欄滾動特效