最近学习前端，把前面用原生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. js引入的几种简单写法

    [方法一]   <script>     function loadScript() {        var script = document.createElement(" ...

  2. javaee验证码如何使用

    首先需要导入jar包 ValidateCode.jar 110   25  为验证码框的大小  4为验证码数目 9为干扰线条数 Servlet代码如下 运行截图如下

  3. 吴裕雄--天生自然Android开发学习：android开发知识学习思维导图

  4. 林轩田机器学习基石笔记1—The Learning Problem

    机器学习分为四步: When Can Machine Learn? Why Can Machine Learn? How Can Machine Learn? How Can Machine Lear ...

  5. Allure介绍

    以下内容基于pytest的框架进行展示: 什么是Allure Allure是一个独立的报告插件,生成美观易读的报告,目前支持语言:Java, PHP, Ruby, Python, Scala, C#. ...

  6. App Store成绞肉机 让创业者止步

    Store成绞肉机 让创业者止步" title="App Store成绞肉机 让创业者止步"> 曾几何时,苹果App Store一直被称之为创业者的天堂.似乎只要灵 ...

  7. 谁来破解公交WiFi的尴尬困局？

      在咖啡馆.饭店坐定,菜单可以待会再看,远远看见服务员迎上来,赶紧先问一句:"这里有无线网吗,密码是多少",和笔者一样养成类似习惯的人越来越多.所以,当公交WiFi"大 ...

  8. Java volatile修饰字段

     一.关键字volatile修饰字段: 使用特殊域变量(volatile)实现线程同步 volatile:不稳定的:反复无常的:易挥发的: 1.volatile关键字为域变量的访问提供了一种免锁机制, ...

  9. mysql-5.7.25解压版本安装和navicat 12.1版本破解-4.8破解工具

    1.配置环境变量 百度网盘下载https://pan.baidu.com/s/1tbOJiOG9l87HbIzsLApX4A 提取码  t657  (mysql-5.7.25大小300M解压后1.6G ...

  10. Train Problem II （卡特兰数+大数问题）

    卡特兰数: Catalan数 原理: 令h(1)＝1,h(0)=1,catalan数满足递归式: h(n)= h(1)*h(n-1) + h(2)*h(n-2) + ... + h(n-1)h(1) ...