补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作.本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来…

上上篇博客介绍了一个sticky组件的简洁实现,经过这两天的思考,发现上次提供的实现还有较多不足的地方,另外跟别的网站上实现的效果在取消固定的时候也有一些不同,上次提供的取消固定的处理方式不好,本文在上文的基础上,提供一个改进版的sticky组件,功能更加完善,希望您有兴趣阅读.代码下载 1. 旧版本的问题 上一个sticky组件的实现中,有多个问题存在: 第一,从sticky的效果上来说,sticky元素在固定前后,不会变化的是相对浏览器左边的位置以及sticky元素的整体宽度,可能会变化的是…

上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果如下: tab导航(对应tab-sticky.html): 滚动导航(对应nav-scroll-sticky.html): 代码下载 1. tab导航的实现 tab导航的需求是:在点击导航项的时候,除了切换tab内容,还要控制滚动,将要显示的tab内容置顶,并且要刚好显示在sticky元素的下边.由…

ele.getBoundingClientRect()的方法是可以获得一个元素在整个视图窗口的位置 可以return的值有width,height,top,left,x,y,right,bottom 场景 当你的一个div是处在viewport的一个中部位置 你想要的效果是当页面滚动到这个div的时候,这个div就固定在页面的顶部位置,其它滚动不变 思路 实现的思路可以利用这个方法来拿到这个div的top值 这个top值就是这个div到viewport的top值 监听页面的滚动事件 然后当这个t…

问题: 1.根据COM组件的ProgID,得到COM组件公开的类型 2.创建COM组件提供的类型的对象 3.调用执行方法 正确姿势 C#利用反射调用(后期绑定)PB编译的COM组件 C#调用COM组件可以在VS工程中直接添加引用,这种方式写起来很方便,但是当COM组件经常更新,这样处理起来倒不如后期绑定适用了. 1.根据COM组件的ProgID,得到COM组件公开的类型 Type comType = Type.GetTypeFromProgID("jmjkk.n_sys_sbjc");…

本章内容 自定义属性快速入门 外化配置 自动配置 自定义创建 Starter 组件 摘录:读书是读完这些文字还要好好用心去想想,写书也一样,做任何事也一样 图 2 第二章目录结构图 第 2 章 Spring Boot 配置 Spring Boot 配置,包括自动配置和外化配置.本章先实现自定义属性工程,将属性外化配置在 application.properties 应用配置文件,然后在工程中获取该属性值.接着会详细介绍属性的获取方式.外化配置和自动配置.最后会介绍利用自动配置自定义 Start…

错误: 对 COM+ 组件进行了方法调用,但该组件有一个已被中止的或正在被中止的事务. (异常来自 HRESULT:0x8004E003)   解决办法: 程序连接的数据库换到本地.   具体原因没搞明白.…

react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 一个组件创建 var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessag…

获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBoundingClientRect 方法则兼容性较好,基本所有的浏览器都支持了,且使用起来更容易和简单. 1.使用语法: element.getBoundingClientRect(); 方法中没有任何参数,返回值为对象类型. 2.在IE8及以下的浏览器中,返回值对象包含的属性值有: top::元素上边缘距离文档…

这段时间再写一个聊天的功能,基本的原理已经通了,剩下的就是细化功能和实现了.原理通了不代表就能解决了这个问题,今天就遇到了一个小问题,就是在接收到新的消息以后,最新的消息不能显示在消息区域,而是跑到了最下面,需要手动划出来.这样的体验肯定是不行的,所以我们就在网上查找解决办法,有的使用js计算高度,然后页面滚动,这种方法虽然比较麻烦,但是确实能解决问题.但是今天又找到了一个更好的办法,就是利用scrollIntoView方法来实现. 首先说一下注意事项,scrollIntoView这个方法首先的…