// 未实现功能的代码 1(自己写的代码)
var _cur_top = $(window).scrollTop();
var num = $(".class_section").length;
var wH = $(window).height();
var t = [];
var i = 0;
$(window).scroll(function () {
var sH = $(window).scrollTop();
var total = wH + sH;
// 滚动条的高度 + 窗口的高度
$(".class_section").each(function (index) {
var offsetTop = $(this).offset().top;
console.log(++i);
console.log('index:' +index +'offTop:' + offsetTop); });
});
console.log(t); // 已实现功能的代码 2 (devin)
var $contentList = $(".class_section");
var _cur_top = $(window).scrollTop();
var contentNum = $contentList.length;
var $nowActiveContent = $contentList.eq(0);
// get the current position
for(var i = 0 ; i < contentNum ; i++)
{ if($(window).scrollTop() <= $contentList.eq(i).offset().top + $contentList.eq(i).height()) {
$nowActiveContent = $contentList.eq(i);
break;
}
} //self.position($nowActiveContent);
if($nowActiveContent.prev().length == 0){
$(window).scrollTop(0);
} else{
$(window).scrollTop($nowActiveContent.offset().top);
}
// manage the scroll's situation
$(window).scroll(function(){
var top = $(window).scrollTop(); var cmpNowActiveTop = $nowActiveContent.prev().length == 0 ? 0 : $nowActiveContent.offset().top;
var cmpNowActiveBottom = $nowActiveContent.next().length == 0 ? $("body").height() : $nowActiveContent.offset().top + $nowActiveContent.height();
if(top >= cmpNowActiveTop && top + $(window).height() <= cmpNowActiveBottom){
_cur_top = top;
return;
} if(_cur_top < top)
{
if(top > cmpNowActiveTop)
{
$nowActiveContent = $nowActiveContent.next().length > 0 ? $nowActiveContent.next() : $nowActiveContent;
}
} else {
if(top + $(window).height() < cmpNowActiveBottom){
$nowActiveContent = $nowActiveContent.prev().length > 0 ? $nowActiveContent.prev() : $nowActiveContent;
}
}
// self.position($nowActiveContent);
if($nowActiveContent.prev().length == 0){
$(window).scrollTop(0);
} else{
$(window).scrollTop($nowActiveContent.offset().top);
} _cur_top = $(window).scrollTop();
});

[jquery]如何实现页面单块DIV区域滚动展示的更多相关文章

  1. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  2. MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件

    目录(?)[+]   1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...

  3. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  4. jQuery实现鼠标点击Div区域外隐藏Div

    冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...

  5. jquery 实现动态表单设计

    只是实现了前台页面的动态表单的设计,并未实现后台绑定数据到数据库等功能.技术使用到的为jquery和bootstrap.俗话说有图有真相,先说下具体效果如下: 点击添加一个面板容器: 容器添加成功: ...

  6. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  7. 整块div设置为超链接进行界面跳转

    鼠标点击当前整块DIV任意一个地方均可进行页面跳转,如果复制过去的代码不能用,请注意双引号和单引号,是否为英文状态下的输入法填写出来的. 1.跳转至新建页面 <div class="& ...

  8. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  9. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

随机推荐

  1. 04. pt-deadlock-logger

    死锁:是指两个或则多个事务在同一个资源上相互占用,并请求锁定对方占用的资源,而导致恶性循环的现象:当产生死锁的时候,MySQL会回滚一个小事务的SQL,确保另一个完成.上面是死锁的概念,而在MySQL ...

  2. POJ 2014.K-th Number 区间第k小 (归并树)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 57543   Accepted: 19893 Ca ...

  3. Java中 i++ 是线程安全的么?为什么?

    问题 在 int i = 0; i = i++; 语句中,i = i++是线程安全的么?如果不安全,请说明上面操作在JVM中的执行过程,为什么不安全?说出JDK中哪个类能达到以上的效果,并且是线程安全 ...

  4. MD5加密及Hash长度拓展攻击【通俗易懂】

    先放一个简单点的利用了Hash长度拓展攻击的题目 if($COOKIE["getmein"] === md5($secret . urldecode($username . $pa ...

  5. 最全面!2019年最新UX设计趋势预测合集

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 追逐潮流是每个行业都必做的一件事,对于直接影响数字产品定位和用户感知方式的UX设计也是如此. 不论你 ...

  6. Windows-universal-samples学习笔记系列二:Controls, layout, and text

    Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu ( ...

  7. android c 读写文件

    1.包含头文件 #include<unistd.h>#include<sys/types.h>#include<sys/stat.h>#include<fcn ...

  8. JS高级- OOP-ES5

    1. OOP 面向对象三大特点: 封装,继承,多态 封装: 问题: 构造函数可重用代码和结构定义,但无法节约内存 为什么: 放在构造函数内的方法定义,每new一次,都会反复创建副本——浪费内存 解决: ...

  9. [转]MySQL索引原理及慢查询优化

    MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色,但所谓“好马配好鞍”,如何能够更好的使用它,已经成为开发工程师的必修课,我们经常会从职位 ...

  10. IOS 单击手势和cell点击冲突

    环境: view上添加tableView,给view添加单击手势,点击cell却走的是手势方法. 解决: UITapGestureRecognizer *tap=[[UITapGestureRecog ...