zoukankan      html  css  js  c++  java
  • 滚动条滚动事件 js

    <div class="xiangxix">
                    <ul>
                        <li class="xxfangwen"><a href="#sjwz">商家位置</a></li>
                        <li><a href="#gmxz">购买须知</a></li>
                        <li><a href="#bdxq">本单详情</a></li>
                       <!-- <li><a href="#detail">商家详情</a></li>-->
                        <li><a href="#xfpj">消费评价(12)</a></li>
                    </ul>
                </div>
                
                <script type="text/javascript">
                  
                         $(window).scroll(function() {
                             var thisscroll = $(window).scrollTop();
                            if( thisscroll>= 600 ){
                                $(".xiangxix").addClass("fixedxiangxix");
                                $(".xiangxix").addClass("container");
                             }else{
                                  $(".xiangxix").removeClass("fixedxiangxix");
                                $(".xiangxix").removeClass("container");
                             }
                             var list1 = $("#sjwz").offset().top - 40;
                             var list2 = $("#gmxz").offset().top - 40;
                             var list3 = $("#bdxq").offset().top - 40;
                             var list4 = $("#xfpj").offset().top - 40;
                             if(thisscroll < list2){
                                 $(".xiangxix ul li").removeClass("xxfangwen");
                                 $(".xiangxix ul li:eq(0)").addClass('xxfangwen');
                             }
                             if(thisscroll >= list2 && thisscroll < list3){
                                 $(".xiangxix ul li").removeClass("xxfangwen");
                                 $(".xiangxix ul li:eq(1)").addClass('xxfangwen');
                             }
                            
                              if(thisscroll >= list3 && thisscroll < list4){
                                 $(".xiangxix ul li").removeClass("xxfangwen");
                                 $(".xiangxix ul li:eq(2)").addClass('xxfangwen');
                             }
                              if(thisscroll >= list4){
                                 $(".xiangxix ul li").removeClass("xxfangwen");
                                 $(".xiangxix ul li:eq(3)").addClass('xxfangwen');
                             }
                         })
                         $(".xiangxix ul li a").click(function(){            
                             if(!$('html,body').is(":animated")){
                                 var thisscrll = $($(this).attr("href")).offset().top - 40;
                                $('html,body').animate({scrollTop:thisscrll+'px'}, 300);
                             }
                         return false;
                         })
                
                </script>
                <div class="qitatg shagnjiaweizhi">
                    <a  name="sjwz" id="sjwz">
                       
                      
                    </a>
                </div>
                <div class="qitatg shagnjiaweizhi">
                    <a  name="gmxz" id="gmxz">
                       
                    </a>
                </div>
                <div class="qitatg shagnjiaweizhi" name="bdxq" id="bdxq">

                </div>

    .fixedxiangxix{
        position:fixed;
        top:0px;
        auto;
        z-index:99999;
        margin:0px auto
    }

    .fixedxiangxix ul {
        display:block;
        98%;
        background:#fff;
    }

  • 相关阅读:
    前端学习之——h5适配
    Python学习之——【开始】
    前端学习之----隐式类型转换
    前端学习之----数据类型
    vue学习之——生命周期
    认识自己(一)
    判断一句话是否是回文,例如, 上海自来水来自海海上
    判断是否为质数
    Python之函数进阶
    Python之冒泡排序
  • 原文地址:https://www.cnblogs.com/mm2015/p/4739912.html
Copyright © 2011-2022 走看看