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效果:

  • 相关阅读:
    Appium自动化环境搭建
    真机Android 8.0版本以上uiautomator定位元素-Unsupported protocol: 2/Unexpected error while obtaining UI hierarchy错误处理
    rsa非对称加密
    QT使用OpenSSL的接口实现RSA的加密解密
    lua安装后其他库使用产生问题解决方法
    log4cpp的使用描述
    std::function和std::bind
    C++11线程睡眠的方式
    高精度计时器
    如何解决TCP拆包粘包问题
  • 原文地址:https://www.cnblogs.com/onceweb/p/14812722.html
Copyright © 2011-2022 走看看