最近学习前端，把前面用原生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. Linux正则表达式及扩展的正则表达式

    基本正则表达式: 扩展的正则表达式:

  2. django框架基础-django模板语言-长期维护

    ##################     常用的模板语言       ####################### # django的模板语言, # # 只需要记两种特殊符号: # # {{ } ...

  3. 如果你的unordered_map头文件报错请看这里

    请将include<unordered_map>头文件换成下面代码 #if(__cplusplus == 201103L) #include <unordered_map> # ...

  4. （三）mybatis级联的实现

    mybatis级联的实现 开篇         级联有三种对应关系: 1.一对一(association):如学号与学生  2.一对多(collection):如角色与用户  3.多对多(discri ...

  5. zookeeper基本知识和zk作用体现

    有一段时间没写博客,今天想着把自己近几个月做的笔记分享一波. 前两个月我一直在看zk的视频:https://coding.imooc.com/learn/list/201.html   从开始看这位老 ...

  6. web端手机方向传感器闲谈

    因为工作需要,这段时间接触的手机传感器比较多.总体来说,市场上的传感器表现参差不齐.IPhone在传感器表现方面卓越,而安卓由于什么机型都有,则显得差强人意. 首先还是说说怎么在web端调用手机传感器 ...

  7. flutter 白板工具Twitter IconFacebook Icon

    flutter 白板工具 Categories: flutter 平常桌面上都放着一些草稿纸,因为经常要整理思路.画画草图啥的.这不是电子时代嘛,就觉得在手机.pad上也可以这样写写画画,我看了有很多 ...

  8. MySQL show命令的用法

    show tables或show tables from database_name; // 显示当前数据库中所有表的名称 show databases; // 显示mysql中所有数据库的名称 sh ...

  9. [置顶] 利用Python 提醒实验室同学值日（自动发送邮件）

    前言: 在实验室里一直存在着一个问题,就是老是有人忘记提醒下一个人值日,然后值日就被迫中断了.毕竟良好的        卫生环境需要大家一起来维护的!没办法只能想出一些小对策了. 解决思路: 首先,我 ...

  10. C++走向远洋——53（项目一1、分数类的重载、加减乘除、比较）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...