如何实现同一个页面里面两个页面的相互切换（window.onscroll）

这里我们通过一个实例来阐述具体的做法，首先我们在一个页面有两个要处理的DIV页面，第一个页面的div中id=”basic”，第二个页面的div中id=”high”。（我们要实现的功能是，点击基础入门，与 高级技能 可以切换对应的页面，基础入门 下滑就是 高级技能页面，高级技能页面上滑就是 基础入门页面）

HTML

     <div class="nav"></div><div id="basic" class="basicintro">..... // 页面一</div><div id="high" class="highskill">.....// 页面二</div>

接下来我们引入zepto-cmd.js（JQuery.js的精简版）或者JQuery.js ,上面是Sea.js引入的写法，常规写法

    <script type="text/javascript" src="jquery-1.12.2.min.js"></script>

接下来就在页面加载后，或者文档元素加载后执行下面的匿名函数。

JS

var $ =window._$=require("/lib_cmd/zepto-cmd")//页面滚动的时候$(function(){/* scrollTo(0,0);*/window.onscroll=function(){      //页面滚动的时候var elm1=$("#basic")[0];var elm2=$("#high")[0];var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {$(".nav ul li a").removeClass("on"); //内部去除锚，和底部CSS样式处理$(".basic a").addClass("on");   //内部添加锚，和底部CSS样式处理//location.hash="#basic";}if (scrolltop >= elm2.offsetTop-$(".nav").height()) {$(".nav ul li a").removeClass("on");$(".high a").addClass("on");// location.hash="#high";}}})

我们通过("#basic")[0] 和("#basic")[0] 和 (“#high”)[0] 拿到对应的DIV对象，通过

    Math.ceil(document.documentElement.scrollTop

拿到滚动条的高度，如果

    scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()，

也就是说但滚动条的高度大于0，并且其高度小于$(“#high”)[0]的高度减去页面最上面

    <div class="nav"></div>

的高度时，第一个页面添加对应的样式，第二个页面去除对应的样式。同理当，并且其高度大于$(“#high”)[0]的高度减去页面最上面

    <div class="nav"></div>

的高度时，第一个页面去除对应的样式，第二个页面加上对应的样式。

这样看似逻辑正确？其实在手机上回出现一个小问题，就是页面在刷新的时候，页面跳不到对应的位置！因此我们做了这样的操作。

var $ =window._$=require("/lib_cmd/zepto-cmd")//页面滚动的时候$(function(){/* scrollTo(0,0);*/window.onscroll=function(){      //页面滚动的时候var elm1=$("#basic")[0];var elm2=$("#high")[0];var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {$(".nav ul li a").removeClass("on");$(".basic a").addClass("on");//location.hash="#basic";}if (scrolltop >= elm2.offsetTop-$(".nav").height()) {$(".nav ul li a").removeClass("on");//内部去除锚，和底部CSS样式处理$(".high a").addClass("on"); //内部添加锚，和底部CSS样式处理// location.hash="#high";}}window.onload=function (){      //页面加载的时候if (window.location.hash=="#basic") {window.location.hash = "";window.location.hash="basic"}else if(window.location.hash=="#high"){window.location.hash = "";window.location.hash="high"}else{window.location.hash = "";window.location.hash="#basic"}}})

我们在页面加载前，对页面当前的锚，做判断，具体做法如上所示。这样就有效的避免页面了在加载，刷新时的问题。

如何实现同一个页面里面两个页面的相互切换（window.onscroll）相关推荐

android 10.0 两个laucher动态相互切换(退出一个launcher到另外一个launcher桌面 )(RK 展讯 MTK等平台都适用)
1.概述在10.0的产品定制化开发中,产品提出进入launcher后,设置为默认laucher,在退出launcher后,调用设置原生laucher的方法后进入原生launcher, 2.两个lau ...
h5 跳转上个页面刷新_H5实现页面内跳转页面
W3School.com.cn 注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开. 原文来源:http://www.w3school.com.cn JS实现页面内跳转 ...
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
复习--3--对于第三堂课的总结--将两个页面相互用超链接链接到一起
1.空格 -- -- 在HTML文件中是使用键盘的空格键无论打多少个都只会显示一个,如使用全角输入法即输入法自带的长空格,那样不规范容易出错 2.在文本中出现<> <用 &am ...
在两个页面之间传递信息
在asp.net不同页面之间传值的方法主要有三种: (1)用querystring 方法:在vs2005中新建asp.net网站(发送端),在页面上添加button,两个TextBox,代码如下: ...
Springboot整合layui之一个页面显示两张表格
该文章由作者精心整理与总结,详细记录了对问题的思考与解决过程,原创文章,转载请在文章明显位置注明出处与原文链接!大家一起成长!!! 需要在layui同一个页面中显示两个子页面,其中一个页面中的表格添加 ...
【css】页面出现两个滚动条以及只有一半页面显示内容的解决方法
可能当修改页面的margin等属性时会出现页面只有一半的页面显示内容的情况,此时我们可以修改css代码来解决问题代码实现: body{overflow:hidden}html{/*overflow- ...
在两个页面间翻转设置Animation动作的一些总结
今天碰到两个页面之间翻转的动作设计问题,发现了一些问题,故做个总结,很多都写在注释部分: 1.首先,我们来手动创建两个view以及相应的viewController.是手动,不是用IB (1)刚开始只 ...
html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: b.html中有一个treeview,称为左菜单i ...

如何实现同一个页面里面两个页面的相互切换（window.onscroll）

HTML

JS

如何实现同一个页面里面两个页面的相互切换（window.onscroll）相关推荐

最新文章

热门文章