html页面超长滚动,长页面滚屏动画

H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 ,

向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画

核心js代码:

$(window).scroll(function () {

var wTop = $(window).scrollTop()

$('.class,.w>div,.instant').each(function () {

if ($(this).offset().top < wTop + $(window).height() * 0.8) {

$(this).addClass('now')

} else if ($(this).offset().top - $(window).height() >= wTop) {

$(this).removeClass('now')

}

})

})

完整Demo

Document

* {

padding: 0;

margin: 0;

}

body,

html {

width: 100%;

height: 100%;

}

.container {

width: 100%;

text-align: center;

}

.banner {

width: 100%;

height: 700px;

background: rgb(135, 178,