页面滑动/滚动，js控制header的呈现

页面滑动/滚动，js控制header的呈现

SUBJ.HeaderManager.prototype = { DELAY_SHOW_HEADER_TIME : 1000, // 页面静止时，延迟显示header的等待时间 showHeaderTimeRemain : 0, // 延迟时间 isOnScroll : false, // 页面是否在滚动/滑动 isHeaderShow : true, // header是否显示 DEVICE_HEIGHT : $(window).height(), // 设备物理的height init : function(){ this.initHeaderStatus(); //this.resetHeaderShowTimeRemain(); this.initWindowScroll(); this.initOnTouchMoveEvent(); this.initDelayShow(); // 始终保持滚动/滑动窗口后，延迟显示header }, // 初始化header的逻辑 initHeaderStatus:function(){ }, // 窗口滚动的逻辑 initWindowScroll:function(){ }, // 窗口滑动的逻辑 initOnTouchMoveEvent : function(){ } // todo 其他逻辑处理 ... } main.js 入口逻辑

$(function(){ // 动态的往html中插入节点 var contentListArr=['语文','数学','外语','文综','理综']; contentListArr.forEach(function(value , index){ console.log('val : ' + value); var content = "<section class='js_common_content'><h1>content " + (index+1) + value +"</h1></section>"; contentWrapObj.append(content); $('.js_common_content').eq(index).css({ 'background-color' : contentBgColorArr[index], 'height' : winH + 'px' }); }); // todo 其他逻辑 ... }); headerManager.less

// header显示的渐变动画 .show-animation{ -webkit-animation: showAnimation 0.3s 0.1s backwards; } @-webkit-keyframes showAnimation { 0%{ opacity: 0; } 100%{ opacity: 1; } }