zoukankan      html  css  js  c++  java
  • 跟随导航事件

    最近做了一些小功能,其中有一个是跟随导航事件。一说这个我就不得不说我之前是有多菜了。为啥?因为这个实在不是什么值得换新鼓舞的事。

    自己之前不努力,现在算是看清楚现状了。也明白了一些道理,别要什么效果都要去百度。好多插件是很高大上,但是用的也只是一小部分,不值当的

    都拿来。自己先想想怎么做,提高会很快。不多说了,让你们看看困扰我的是什么样的难题。

    先来html跟随导航部分

            <div class="scroll">
                <a class="scroll_01 now"></a>
                <a class="scroll_02"></a>
                <a class="scroll_03"></a>
                <a class="scroll_04"></a>
                <a class="scroll_05"></a>
                <a class="scroll_06" href="http://www.cmbc.com.cn/" target="_blank"></a>
                <span class="scroll_top"></span>
                <div class="scroll_bg_01"></div>
                <div class="scroll_bg_02"></div>
            </div>

    jq写的代码部分

        //获取滚动条距离顶端的距离 
        function getScrollTop() {  
            var scrollPos;  
            if (window.pageYOffset) {  
              scrollPos = window.pageYOffset; 
         }
    else if (document.compatMode && document.compatMode != 'BackCompat') {
           scrollPos
    = document.documentElement.scrollTop;
         }
    else if (document.body) {
          scrollPos = document.body.scrollTop;
         }
    return scrollPos; } $(window).scroll(function() { var yheight=getScrollTop(); //滚动条距顶端的距离 if(yheight <= 567){ $(".scroll a").removeClass("now"); $(".scroll_01").addClass("now"); }else if(yheight >=567 && yheight<=888 ){ $(".scroll a").removeClass("now"); $(".scroll_02").addClass("now"); }else if(yheight>=888 && yheight<=1339){ $(".scroll a").removeClass("now"); $(".scroll_03").addClass("now"); }else if(yheight>=1339 && yheight<=1500){ $(".scroll a").removeClass("now"); $(".scroll_04").addClass("now"); }else if(yheight>=1500 && yheight<=1772){ $(".scroll a").removeClass("now"); $(".scroll_05").addClass("now"); } });
  • 相关阅读:
    Kubernetes实战总结
    Kubernetes实战总结
    Kubesnetes实战总结
    Kubernetes实战总结
    【转载】Nginx、HAProxy、LVS三者的优缺点
    Kubernetes实战总结
    【解决】 Streaming server stopped unexpectedly: listen tcp: lookup localhost on 114.114.114.114:53: no such host
    Kubernetes实战总结
    (转载)常用正则表达式大全——包括校验数字、字符、一些特殊的需求
    css选择器参考手册
  • 原文地址:https://www.cnblogs.com/BATAKK/p/5066776.html
Copyright © 2011-2022 走看看