zoukankan      html  css  js  c++  java
  • $(window).scrollTop()与$(dom).offset().top

    js代码如下:

    //点击导航
    $("#col-md-12_1621671164153 a").click(function(event){
        event.preventDefault();
        $(this).addClass("activeCur").siblings().removeClass("activeCur")
        $("html,body").animate({ 
            scrollTop:$($.attr(this, "href")).offset().top-58
         }, 100);
    })
    //滚动操作
    $(window).scroll(function(){
        var cptd = parseInt($("#col-md-12_1621671164196").offset().top-143)
        var cpgn = parseInt($("#col-md-12_1621671164244").offset().top-143)
        var fzlc = parseInt($("#col-md-12_1621671164303").offset().top-143)
        var fwyaq = parseInt($("#col-md-12_1621671164351").offset().top-143)
        var khal = parseInt($("#col-md-12_1621671164411").offset().top-143)
        var scroH = $(this).scrollTop();
        if(scroH+62 > $("#col-md-12_1621671164151").offset().top){
            $("#app #col-md-12_1621671164153").addClass("thisScrollTop")
        }else{
            $("#app #col-md-12_1621671164153").removeClass("thisScrollTop")
        }
        if(scroH>=khal-500){
            set_cur(".a_1621671164188")
            console.log("客户案例")
        }else if(scroH>=fwyaq){
            set_cur(".a_1621671164181")
            console.log("服务与安全")
        }else if(scroH>=fzlc){
            set_cur(".a_1621671164175")
            console.log("发展历程")
        }else if(scroH>=cpgn){
            set_cur(".a_1621671164167")
            console.log("产品功能")
        }else if(scroH>=cptd){
            set_cur(".a_1621671164161")
            console.log("产品特点")
        }
    })
    function set_cur(n){
        if($("#col-md-12_1621671164153 a").hasClass("activeCur")){
            $("#col-md-12_1621671164153 a").removeClass("activeCur");
        }
        $("#col-md-12_1621671164153 a"+n).addClass("activeCur");
    }
    

    //css代码如下这个类名要添加到嵌套第二个标签(div),否则滚动到下边的dom因为受到当前导航的fixed定位而相差当前导航高度;
    .thisScrollTop{position: fixed;
       100%;
      top: 0;
      left: 0;
      z-index: 10000;
      background: #fff;
      box-shadow: 0 2px 5px 1px rgb(0 0 0 / 10%);
    }
    

    UI效果:

  • 相关阅读:
    Android 网络框架学习之Retrofit,androidretrofit
    Android 应用APP加入聊天功能
    Mybatis 数据库物理分页插件 PageHelper
    mvn常用命令
    执行第一maven用例出错:Unknown lifecycle phase "complile".
    Mybatis分页插件
    ViewHolder模式超简洁写法
    android网络框架Retrofit 同步异步
    严苛模式(StrictMode)
    使用PF_PACKET和SOCK_RAW发送自己定义type以太网数据包
  • 原文地址:https://www.cnblogs.com/onceweb/p/14812722.html
Copyright © 2011-2022 走看看