最近学习前端，把前面用原生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. Disk Group基础概念与深度解析

  2. [LC] 238. Product of Array Except Self

    Given an array nums of n integers where n > 1,  return an array output such that output[i] is equ ...

  3. python自动化测试之函数（匿名函数lambda和三目运算等（高级用法））

    ''' 匿名函数: lambda ''' def Add(a,b): print(a+b) Add(2,3) per = lambda a,b:a+b print(per(2,3)) ''' 三目运算 ...

  4. npm install依赖时，常见错误

    1.npm install依赖时,报错:npm ERR! Unexpected end of JSON input while parsing near '...gin":"^1. ...

  5. Linux命令alias - 设置命令的别名

    用途说明设置命令的别名.在linux系统中如果命令太长又不符合用户的习惯,那么我们可以为它指定一个别名.虽然可以为命令建立“链接”解决长文件名的问题,但对于带命令行参数的命令,链接就无能为力了.而指定 ...

  6. 用Python拨打电话

    用python拨打电话,先看小视频 跟selenium操作浏览器原理类似,这是用appium操作移动设备的一个自动化功能,自娱自乐,主要是通过小案例引出相关技术 一.环境配置: 1.安装 jdk 1. ...

  7. 算法拾遗[4]——STL用法

    主要bb一下优先队列和字符串吧. 哦还有 bitset. 优先队列 定义很容易: priority_queue<int> pq; 内部是一个堆. 基本操作 pq.top() 取堆顶元素; ...

  8. Python2.7错误处理FileNotFoundError报错NameError: name 'FileNotFoundError' is not defined

    错误信息如下: 原因是FileNotFoundError是python3.0中的写法,而Python2.7中应写为IOError.

  9. numpy.random模块用法总结

    from numpy import random numpy.random.uniform(low=0.0, high=1.0, size=None) 生出size个符合均分布的浮点数,取值范围为[l ...

  10. 冒泡排序算法(C#、Java、Python、JavaScript、C、C++实现)

    一.介绍 它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小.首字母从Z到A)错误就把他们交换过来. 走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排 ...