随着滚动条滚动的Tab切换 – js例子 - 源码

Fecshop 2016-10-28 15:57:42 4974次浏览 2条评论 0 0 0

在电商网站，我们有一些tab 想要他，随着下拉，tab自动切换的方式，

这样无论对seo还是客户体验都很不错，下面是实现的一个例子，代码如下：

在拖动下面的Description Review 部分，在拖动的过程中，上面的tab自动切换，点击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);  
        if(document.body.scrollTop){
          scroll = document.body;
        }else if(document.documentElement.scrollTop){
          scroll = document.documentElement;
        }
            interval = setInterval(function(){  
          if(scroll.scrollTop + a<=textChild[self.index].offsetTop){  
            scroll.scrollTop += 40;  
            if(scroll.scrollTop + a>=textChild[self.index].offsetTop){  
              scroll.scrollTop = textChild[self.index].offsetTop-a;  
              clearInterval(interval);  
            }  
          }else{  
            scroll.scrollTop /= 1.1;  
            if(scroll.scrollTop + a<=textChild[self.index].offsetTop){  
              scroll.scrollTop = textChild[self.index].offsetTop-a;  
              clearInterval(interval);  
            }  
          }  
        },40); 
        };  
    }  
    </script>    
    </body>  
    </html>

yii_admin 评论于 2016-11-25 17:13 举报

23213123> 这里输入引用文本> > > 这里输这里> 1. 1. - - ![呵呵](http://www.yiichina.com/uploads/avatar/000/01/66/57_avatar_middle.jpg "呵呵")输入代码入引用文本

共 1 条回复

Fecshop 评论于 2016-11-25 19:07 回复

what do you want to say?

回复 0 1
Fecshop 评论于 2016-12-22 09:15 举报

最后，推荐一下我的Fecshop ，开源商城，github地址：https://github.com/fancyecommerce/yii2_fecshop

演示地址：http://fecshop.appfront.fancyecommerce.com/

截止到2016-11-12号，产品，分类，首页，评论，用户中心，搜索，多语言，多货币等功能已经做完，除了购物车和支付部分，其他的基本都已经完成，关注fecshop的在等2-3个月，也就是明年2,3月份，版本已经就可以出来，2017年4,5月份在把手机web 做一下，预计到明年5月份，后台，pc前台，手机web前台，命令控制台这几个入口基本可以完善，多谢大家关注和你们的Star，谢谢，我会坚持把他写好。

作者QQ：2358269014

回复 0 0

您需要登录后才可以评论。登录 | 立即注册

副总裁

Fecshop 深圳

注册时间：2016-01-21
最后登录：2023-02-16
在线时长：73小时31分

粉丝157
金钱2381
威望490
积分8011

随着滚动条滚动的Tab切换 – js例子 [ 2.0 版本 ]

共 2 条评论

发表评论

Fecshop 深圳

热门源码