js如何修改css?Javascript实现滚动条下拉时,侧边栏固定的实现

1<style>

 

.filter_block_wrapper a{

text-decoration:none;

color:black;

}

.filter_block_wrapper a:hover{

background-color:#E7E9EB;

}

 

@media screen and (max-width: 600px){

.sidebar_filter_container{display:none;}

}

  #fixed-siderbar{

    z-index: 0;

    position:fixed;

    top:70px;

}

  #sidebar_filter2{display:block!important}

</style>

    <script src=”{{%20’jquery-3.4.1.min.js’%20|%20asset_url%20}}” ></script>

 

<script>

//固定tag cloud

jQuery(function ($) {

    //指定的高度,侧边栏距顶部距离+侧边栏高度+可视页面的高度

    var sideTop=$(“#sidebar_filter1”).offset().top;

    var scTop = function() {

    if( typeof window.pageYOffset != ‘undefined’) {

        return window.pageYOffset;

    } else if( typeof document.compatMode != ‘undefined’ && document.compatMode != ‘BackCompat’) {

        return document.documentElement.scrollTop

    } else if( typeof document.body != ‘undefined’) {

        return document.body.scrollTop;

    }

}

 

$(window).scroll(function() {

        if (scTop() > sideTop) {

        if($(“#fixed-siderbar”).length == 0){

            //下面是要显示的模块,复制侧边栏中的标签云内容,追加到侧边栏的底部

            //var tag = $(“#sidebar_filter2″).clone().html();

         // var html=”<style>#sidebar_filter3{display:none;}</style><div id=’fixed-siderbar’>”+ tag +”</div>”

          //  $(“#sidebar_filter1”).append(html);

          

          

        

  var obj = document.getElementById(“sidebar_filter2”);

  //obj.className = “style2”;

  obj.setAttribute(“id”, “fixed-siderbar”);

 

          

        }else{

            $(“#fixed-siderbar”).show();

          

        }

    }else{

        $(“#fixed-siderbar”).hide();

       var obj = document.getElementById(“fixed-siderbar”);

  //obj.className = “style2”;

  obj.setAttribute(“id”, “sidebar_filter2”);

      

    };

  });

});

</script>

About the Author

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

You may also like these