关键代码

const H = 50; // header的高度
const H2 = H / 2;
let cy = 0; class Home extends Component {
@observable top = 0;
@observable ms = 0; onScroll = ({ y }) => {
let scrollLength = Math.abs(y - cy); if (y < cy) {
l("paeg up");
if (this.top >= -H) {
const newTop = this.top - scrollLength;
this.top = Math.max(newTop, -H);
}
} else if (y > cy) {
// l("page down");
if (this.top <= 0) {
let newTop = this.top + scrollLength;
this.top = Math.min(newTop, 0);
}
} else {
// l("没动");
} if (cy !== y) cy = y; // 保存这一次的值,在下一次作比较
}; onScrollEnd = ({ y }) => {
const top = Math.abs(this.top);
this.ms = 200;
if (top <= H2) {
l("show");
this.top = 0;
} else {
l("hide");
this.top = -H;
}
this.ms = 0;
}; render() {
const { classes } = this.props;
return (
<div class={classes.root}>
{/* hedaer */}
<HomeHeader top={this.top} ms={this.ms} /> <div className={classes.wraper}>
<Scroll
onScroll={this.onScroll}
onScrollEnd={this.onScrollEnd}
bounce={false}
>
<div> ... </div>
</Scroll>
</div>
</div>
);
}
} class HomeHeader extends Component {
render() {
const { top, ms } = this.props;
return (
<AppBar
color="inherit"
position="fixed"
style={{
transition: `transform ${ms}ms ease`,
transform: `translateY(${top}px)`,
}}
> ... </AppBar>
);
}
}

react better-scroll 编写类似手机chrome的header显示隐藏效果的更多相关文章

  1. JS编写类似弹出窗口样式显示层

    JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" ...

  2. WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  3. 真机调试之android手机+chrome

    真机调试之android手机+chrome 虽然chrome上的移动设备模拟器很强大,但是在真机运行的时候,总会遇到一些小问题,这时就需要使用真机调试了. 第一步:准备一台android手机,并在手机 ...

  4. Appium(Python)驱动手机Chrome浏览器

    手机Chrome浏览器访问淘宝H5与在电脑上访问淘宝H5是一摸一样的: 第一种方法: 直接在电脑Chrome浏览器上打开F12: 第二种方法: 手机连接电脑后, 在手机Chrome浏览器上打开淘宝H5 ...

  5. 【Python】[技术博客] 一些使用Python编写获取手机App日志的操作

    一些使用Python编写获取手机App日志的操作 如何获取手机当前打开的App的包名 如何获取当前App进程的PID 如何查看当前App的日志 如何将日志保存到文件 如何关闭进程 如何不显示命令行窗口 ...

  6. 手机软件Toast无法显示提示信息

    近日在做项目时,测试组的同事提出一个bug,就是在一台LG手机上,原本应该显示的Toast信息,都不显示,消息栏也没有出现通知,后来经过查资料知道有些三星.LG手机默认禁用了显示通知那一项,而不显示通 ...

  7. EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  8. scroll事件实现监控滚动条并分页显示示例(zepto.js)

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  9. 手机自带的显示基站命令(android手机定位,iphone基站定位)

    手机自带的显示基站命令(安卓手机定位,苹果手机基站定位) 分类: 通信和网络2012-02-07 17:48 1734人阅读 评论(0) 收藏 举报 手机htciphone中兴三星网络 安卓手机自带快 ...

随机推荐

  1. [Nuget]使用Nuget管理工具包

    摘要 这里演示如何使用Nuget对类库进行打包,并将类库上传到nuget上面. 步骤 1.在nuget官网注册账号,并登陆. https://www.nuget.org 2.下载Nuget.exe,并 ...

  2. 咏南新CS三层开发框架

    咏南新CS三层开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.baidu ...

  3. python3 HTTP Error 403:Forbidden

    问题描述初学python,在用python中的urllib.request.urlopen()和urllib.request.urlretrieve方法打开网页时,有些网站会抛出异常: HTTP Er ...

  4. [Vuex] Lazy Load a Vuex Module at Runtime using TypeScript

    Sometimes we need to create modules at runtime, for example depending on a condition. We could even ...

  5. Git-Book

    关于git的文档https://git-scm.com/book/zh/v2

  6. 【C++】C++中类的基本使用

    1.类和成员声明,定义,初始化的基本规则 C++中类的基本模板如下: namespace 空间命名{//可以定义namespace,也可以不定义 class/struct 类名称{ public/pr ...

  7. 在Python中定义和使用抽象类的方法

    https://www.jb51.net/article/87710.htm 像java一样python也可以定义一个抽象类. 在讲抽象类之前,先说下抽象方法的实现. 抽象方法是基类中定义的方法,但却 ...

  8. OC 与 js 界面JSBridge交互

    // 1.新建WebView self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubv ...

  9. Unity3D中录制和输出wav文件

    近期在做视频录制方面的事情,看了下音频的录制和输出.主要参考官方的FrameCapturer: https://github.com/unity3d-jp/FrameCapturer wav文件结构较 ...

  10. word,excel,ppt,txt转换为 PDF

    /// <summary> /// 将word文档转换成PDF格式 /// </summary> /// <param name="sourcePath&quo ...