网站中常见这种效果,某个广告或详情页切换tab,当屏幕向下移动时,该元素会停留在浏览器最顶部,下面ecshop模板中心教您实现js代码:

案例图:

1.首先在页面上找到该元素  加上 id ="inner" 。

2.在页面加js代码

<script type="text/javascript">

var obj11 = document.getElementById("inner");

var top11 = getTop(obj11);

var isIE6 = /msie 6/i.test(navigator.userAgent);

window.onscroll = function(){

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

if (bodyScrollTop > top11){

obj11.style.position = (isIE6) ? "absolute" : "fixed";

obj11.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";

} else {

obj11.style.position = "static";

}

}

function getTop(e){

var offset = e.offsetTop;

if(e.offsetParent != null) offset += getTop(e.offsetParent);

return offset;

}

</script>

元素随屏幕滚动到顶部固定js效果的更多相关文章

  1. div随页面滚动遇顶固定的两种方法(js&jQuery)

    一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...

  2. div样式position:fixed,不随屏幕滚动而滚动,导致屏幕太小时弹出层被遮挡,无法滚动查看的解决办法

    window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...

  3. WebView 实现JS效果和a标签的点击事件

    目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...

  4. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  5. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  6. JS-特效 ~ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

    ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...

  7. jquery页面滚动,菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  8. 页面滚动图片等元素动态加载插件jquery.scrollLoading.js

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  9. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

随机推荐

  1. 卡西欧(casio)Fx-5800p程序调试器||模拟器V1.0

    一.[背景] 都说这个卡西欧5800p没有模拟器,模拟器其实就是个电脑上面模拟他的界面的东西,但是真正的核心,他不一定有,而且我们测量方面的编程及时有了所谓的外形模拟器也学不会的. 都说这个卡西欧58 ...

  2. IO -阻塞,非阻塞, 同步,异步

    转载自: http://blog.csdn.net/historyasamirror/article/details/5778378 同步(synchronous) IO和异步(asynchronou ...

  3. 快速理解RequireJs(转)

    RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂. 在h ...

  4. mysql中文进行全文索引支持问题

    先来看看对一个字段做全文索引,作为一个数据库系统需要做哪些工作? 假设一个文章表里面包含几个字段:文章id.文章作者.文章标题.文章内容 比如,我们对文章内容这个字段artilce_content建立 ...

  5. 微软开放了.NET 4.5.1的源代码

    您目前处于: InfoQ首页 新闻 微软开放了.NET 4.5.1的源代码   微软开放了.NET 4.5.1的源代码 作者 姚琪琳 发布于 二月 26, 2014 | 1 讨论 新浪微博腾讯微博豆瓣 ...

  6. sql sever跨数据库复制数据的方法

    1,用Opendatasource系统函数 详细的用法已经注释在sql代码中了.这个是在sqlserver到sqlserver之间的倒数据.2005,2008,2012应该都是适用的. --从远程服务 ...

  7. 在eclpse中 一个web project 引用多个 java project 的方法

    在开发时,我们会遇到一个需求:模块化.它要求我们把 业务组件进行拆分,分组.把一部分业务功能集中处理,以保证 部分功能块的独立,便于 分配任务到个人,确定人员职责,源代码管理,和发布时重组. 我们尝试 ...

  8. mysql innodb_buffer_pool_size mysql占用内存大小和主从复制并行线程数量

    innodb_buffer_pool_size   set global slave_parallel_workers=4;

  9. Ogre 编辑器二(用Ogre的地形组件加载天龙八部地形)

    主界面如上文设计完成后,场景刚开始添加了是Ogre例子里的,发现场景里实物太少,于是想到直接把天龙的场景拿下来,天龙网上有源码,参考了下,把天龙的地形用Ogre的地形组件完成了下,如下是效果图: 因为 ...

  10. CentOS 7 之前好好的,突然一天启动时黑屏,没有登陆界面了(配置 network-scripts 连网)

    原因: 百度大神说是Gnome(一套纯粹自由的计算机软件,运行在操作系统上,提供图形桌面环境)不行了. 解决方法: 1. 重启系统,ctrl + alt + F2 进入命令行界面. 2. sudo s ...