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

  • 相关阅读:
    The kernel’s command-line parameters(1)
    Linux kernel release 5.x <http://kernel.org/>(1)
    2020 LInux Kernel History Report(2)
    2020 LInux Kernel History Report
    Android下拉刷新,上拉加载
    多条目加载和适配器
    PAT:1071. Speech Patterns (25) AC
    PAT:1054. The Dominant Color (20) AC(map法)
    PAT:1054. The Dominant Color (20) AC(抓住最多的特点,处理不同和相同的情况,留下剩余的答案)
    PAT:1060. Are They Equal (25) AC
  • 原文地址:https://www.cnblogs.com/onceweb/p/14812722.html
Copyright © 2011-2022 走看看