[jquery]如何实现页面单块DIV区域滚动展示

    // 未实现功能的代码 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();
	});
时间: 2024-12-05 01:44:33

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

水池数目 ----- 图中有几个 单块的区域

水池数目 时间限制: 3000ms内存限制: 128000KB 64位整型: Java 类名: 上一题 提交 运行结果 统计 讨论版 下一题 题目描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中共有几个水池. 输入 第一行输入一个整数N,表示共有N组测试数据 每一组数据都是先输入该地图的行数m(0<m<100)与列数n(0<n<100),然后,输入

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

目录(?)[+] 1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js (1).popPicker 适用于弹出单级或多级选择器 a.通过new mui.PopPicker()初始

jquery点击非div区域隐藏div

点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class="per_c"> <div class="person-msg pull-right"> <img src="../../res/images/snow_man.jpg"> </div> <dl class=

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

摘录自:http://www.crackedzone.com/jquery-click-div-outside-hide-div.html jQuery本身没有这样一个事件,要实现这个效果,我们首先要先了解javascript中的事件冒泡. 冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络) 1. 阻止事件冒泡, 并不阻止事件行为:event.s

JavaScript实现页面滚动到div区域div以动画方式出现

用JavaScript实现页面滚动到div区域div以动画方式出现CSS动画 页面滚动到一块区域,改区域以动画方式出现实现这个效果需要二点:一我们要先写好一个css动画,二:用js的监听页面滑动的距离在给div添加动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> img { width: 1

Jquery异步提交表单到Action

转载请注明出处:jiq?钦's technical Blog 一 需求 出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.jsp,以返回的JSON数据为参数. 效果如下: 现在的需求是:我要在编

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

从零开始学习jQuery (七) jQuery动画-让页面动起来!

原文:从零开始学习jQuery (七) jQuery动画-让页面动起来! 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

如何利用jQuery进行简单表单验证

如何利用jQuery进行简单表单验证:利用jQuery可以进行表单验证,当然有比较复杂的表单验证,这里就不介绍了,下面就简单介绍一下如何使用jQuery进行简单的表单验证,然后大家可以通过改造进行基本的表达验证了.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http