最近学习前端，把前面用原生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. Qt 项目中main主函数及其作用

    main.cpp 是实现 main() 函数的文件,下面是 main.cpp 文件的内容. #include "widget.h" #include <QApplicatio ...

  2. [LC] 45. Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  3. 地址SQL文件

    文件下载 Beckoning

  4. 洛谷-P3809-后缀排序(后缀数组)

    看了求后缀数组的倍增法之后很快就理解了,但是自己写的倍增法用map排序还是超时了.然后看了两天别人写的模板,题目是通过了,但感觉代码还是半懂半背的.以后多熟悉熟悉吧: 后缀数组 #include &q ...

  5. 查看github仓库的地址

  6. Docker企业级镜像仓库harbor(vmware 中国团队)

    第一步:安装docker和docker-compose 第二步:下载harbor-offline-installer-v1.3.0.tgz 第三步:上传到/opt,并解压 第四步:修改harbor.c ...

  7. mybatis-generator二次开发总结

    二次开发(此文只作记录,具体代码及文章在内网,copy不出来) 自定义生成代码需求: 1.去除默认生成的example接口方法: (1)配置generatorConfig.xml (2)修改源码tab ...

  8. 三年无限流量免费随身WiFi充电宝是真的还是套路？

    一般来说大家现在看到"无限流量"."免费"等字眼,总会有一种"这是陷阱"."这是大坑"."就要黑你钱" ...

  9. SWUST OJ 有趣的三位数(0319)

    有趣的三位数(0319) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 158 Accepted: 62   Description ...

  10. [转]win7 64位下完美安装64位oracle 11g

    最近在网上搜如何在win764位的情况下安装64位的oracle,并且使用PLSQL Developer来管理oracle. 于是开始在oracle官网下载数据库,下载是一件很简单的事情,问题是在百度 ...