最近学习前端，把前面用原生js写的一段有关tab切换效果的代码贴上，实现的效果比较简陋，请大家见谅

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>随着滚动条滚动的Tab切换</title>

<style>

*{

    list-style:none;

    margin:0;

    padding:0;

    text-decoration:none;

    font-family:'Microsoft YaHei';

}

li{

    width:100px;

    height:50px;

    line-height:50px;

    float:left;

    border-right:2px solid #eee;

    text-align:center;

    cursor:pointer;

}

ul{

    width:1200px;

    margin:0 auto;

}

.nav{

    height:52px;

    width:100%;

    background:#f5f5f5;

}

.nav .cur{

    background:#fff;

    border-top:2px solid #1a92cf;

    color:#1a92cf;

}

.fixed{

    position:fixed;

    top:0;

    left:0;

}

a{

    color:#505050;

}

</style>

</head>

<body>

<br/><br/><br/><br/><br/><br/><br/>

<div class="nav" id="nav-container">

    <ul id="nav-box">`

        <li class="cur">text1-nav</li>

        <li>text2-nav</li>

        <li>text3-nav</li>

    </ul>

</div>

<div id="text">

    <div style="width:100%;height:500px;background:green;text-align:center;">text1</div>

    <div style="width:100%;height:500px;background:yellow;text-align:center;">text2</div>

    <div style="width:100%;height:500px;background:blue;text-align:center;">text3</div>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<script>

var navContainer = document.getElementById("nav-container");

var navBox = document.getElementById("nav-box");

var text = document.getElementById("text");

var navBoxChild = navBox.children;

var textChild = text.children;

var num = navContainer.offsetTop;

var a = navContainer.offsetHeight;

window.onscroll = function(){

    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

    if(scrollTop >= num){

        navContainer.className = "nav fixed";

        text.style.paddingTop = a +"px";

    }else{

        navContainer.className = "nav";

        text.style.paddingTop = "";

    }

    //当导航与相应文档接触的时候自动切换

    //method1

    for(var i=0;i<navBoxChild.length;i++){

        if( scrollTop + a >= textChild[i].offsetTop){

            for(var j=0;j<navBoxChild.length;j++){

                navBoxChild[j].className = "";

            }

            navBoxChild[i].className = "cur";

       }

    }

};

for(var i=0;i<navBoxChild.length;i++){

    var interval;

    navBoxChild[i].index = i;

    navBoxChild[i].onclick = function(){

        var self = this;

        clearInterval(interval);

        interval = setInterval(function(){

            if(document.body.scrollTop + a<=textChild[self.index].offsetTop){

                document.body.scrollTop += 40;

                if(document.body.scrollTop + a>=textChild[self.index].offsetTop){

                    document.body.scrollTop = textChild[self.index].offsetTop-a;

                    clearInterval(interval);

                }

            }else{

                document.body.scrollTop /= 1.1;

                if(document.body.scrollTop + a<=textChild[self.index].offsetTop){

                    document.body.scrollTop = textChild[self.index].offsetTop-a;

                    clearInterval(interval);

                }

            }

        },40);

    };

}

</script>

</body>

</html>

大家有兴趣的可以复制下看下效果，谢谢大家浏览！
原文链接：https://blog.csdn.net/wl7175/article/details/52068112/

原生js实现随着滚动条滚动，导航会自动切换的效果的更多相关文章

  1. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

  2. 原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

    预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...

  3. 原生js实现单屏滚动

    类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...

  4. js控制页面每次滚动一屏，和楼梯效果

    我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...

  5. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  6. 原生Js汉语拼音首字母匹配城市名/自动提示列表

    根据城市的汉语名称首字母把城市排序,基本思路: 1.处理数据,按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQR ...

  7. 2018年 js 简易控制滚动条滚动的简单方法

    首先是es2015 的新api Element.scrollIntoView() // 滚动到最上方 等同于 dom.scrollIntoView(true) Element.scrollIntoVi ...

  8. JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把: index.html 页面展示代码 <!DOCTYPE html PUBLIC " ...

  9. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

随机推荐

  1. 浅谈Java转义符\\|

    看一段程序 String t = "a||b||c||d"; String[] temp = t.split("\\|\\|"); System.out.pri ...

  2. mysql-5.7.14-winx64解压版配置

    1.下载最新的MySQL文件并且解压 我的位置是 F:\mysql-5.7.14-winx64 2.F:\mysql-5.7.14-winx64\bin; 添加到环境变量-系统变量-PATH下 3.复 ...

  3. 对这些工程师来说，Skype Translator是他们自己的事——Skype Translator项目研发团队的故事

    Translator是他们自己的事--Skype Translator项目研发团队的故事" title="对这些工程师来说,Skype Translator是他们自己的事--Sky ...

  4. java集合 list与Set、Map区别

      1.List,Set都是继承自Collection接口,Map则不是. 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉 ,(注意:元素虽 ...

  5. 在 mac osx 上安装OpenOffice并以服务的方式启动

    OpenOffice是Apache基金会旗下的一款先进的开源办公软件套件,包含文本文档.电子表格.演示文稿.绘图.数据库等.包含Microsoft office所有功能.它不仅可以作为桌面应用供普通用 ...

  6. Python 搭建webdriver环境遇到的问题总结

    安装过程是参考<selenium2Python自动化测试实战>中Pythonwebdriver环境搭建章节 在安装过程中,遇到了一些问题,总结一下,为日后自己再遇到相同问题做个笔记以便查看 ...

  7. Java Servlet和Java Filter简介

    一:简介servlet 1.什么是Servlet? Servlet可以通过多种方式进行描述,具体取决于上下文: (1)Servlet是一种用于创建web应用程序的技术 (2)Servlet是一个API ...

  8. 来自澳洲的数据秀场：记KDD 2015大会

    作者:微软亚洲研究院实习生 王英子 南半球最大城市和数据挖掘界顶级会议的浪漫碰撞 悉尼,作为澳大利亚第一大城市及新南威尔士州首府,澳大利亚的经济.金融.航运和旅游中心,同时还是南半球最大的城市和重要的 ...

  9. fastcgi_param详解

    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;#脚本文件请求的路径 fastcgi_param QUERY_STRI ...

  10. flume install

    flume install flume 安装 123456 [root@10 app][root@10 app]# mv apache-flume-1.7.0-bin /mnt/app/flume[r ...