网站中常见这种效果,某个广告或详情页切换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. C语言 · 数的运算

    算法提高 数的运算   时间限制:1.0s   内存限制:512.0MB      输入一个正整数(范围[1..10000]),打印其平方(不保留小数位).平方根.倒数.(用指针实现,保留2位小数,输 ...

  2. 对于PHP中enum的好奇

    PHP中没有struct.enum这些东西,虽然万能的array用起来很爽,但写出来的代码typo问题很多.可维护性也差,需要更多的测试来辅助,而一旦加上测试的工作量是否还谈得上『爽』就是个问号了. ...

  3. Linxu磁盘分区

    http://vbird.dic.ksu.edu.tw/linux_basic/0130designlinux.php#hardware_know(好文章) http://blog.chinaunix ...

  4. Hibernate 查询说明

    1.Criteria setFetchSize实际上与分页操作并没有关系,它的作用是在查询中进行分批数据返回,其中的值就是每次分批查询的记录数,主要是为了提高查询性能的. 举个例子来说:如果你这次查询 ...

  5. spring boot 使用拦截器 无法注入 配置值 、bean问题

    参考:https://www.cnblogs.com/SimonHu1993/p/8360701.html 一定要将 拦截器组件 交给spring容器进行管理,这样才能注入配置值,或者注入bean: ...

  6. Spring Cloud Sleuth 服务跟踪 将跟踪信息存储到数据库

    参见上一篇博客:Spring Cloud Sleuth 服务跟踪 参考:zipkin使用mysql保存数据 主要在跟踪服务上配置: 在数据库创建数据库表:(可不创建,在classpath中添加对应的s ...

  7. java 、HashMap 和单例

    前段时间在项目中遇到一个问题.当多个系统同时运行时,大部分系统能够良好运转,部分却卡死在了启动界面.以下是我解决该问题的步骤和总结:   1.复现问题.重新走了一遍出问题的过程,发现问题的确存在.说明 ...

  8. Eclipse启动都会Error when loading the SDK

    http://jingyan.baidu.com/article/aa6a2c14fb54190d4c19c480.html

  9. 深入浅出学习Hibernate框架(二):JDBC基础操作

    上篇博客<深入浅出学习Hibernate框架(一):从实例入手初识Hibernate框架>简单介绍了一下Hibernate框架,并且举了一个实例来了解Hibernate.这篇博客将介绍JD ...

  10. "add-apt-repository" On Linux

    在 Ubuntu 9.10以后 我们可以使用 "add-apt-repository" 脚本添加 ppa 到当前的库中并且自动导入公钥. 再终端下使用下面的语法: add-apt- ...