zoukankan      html  css  js  c++  java
  • 元素跟随着滚动条运动

    有这种情况,页面中的某些元素需要跟随滚动条运动,位置一直在页面中的某个位置;

    思路:

    当页面滚动的时候,一直获取滚动条距离顶部的距离,当顶部的距离等于某个数值的时候,直接开始改变这个元素的position的值为fixed,不等于这个数值的时候为relative;

    注意的是需要在html中写一个和这个元素一样的元素,不等于数值的这个元素为display:none,等于数值的这个元素为display:block。这个是为了防止当需要固定的元素

    脱离文档流的时候,下面的元素向上移动,为了占位置的;

    主要的代码

    $(function(){
                $(window).scroll(function(){
                    var sctop=$(document).scrollTop();
                    if(sctop>=200){
                        $(".ding").css({
                            "position":"fixed",
                            "left":"0px",
                            "top":"0px"
                        });
                        $(".ding-no").css({
                            "display":"block"
                        });
                    }else{
                        $(".ding").css({
                            "position":"relative",
                            "left":"0px",
                            "top":"0px",
                            
                        });
                        $(".ding-no").css({
                            "display":"none"
                        });
                    }
                });
            });

    全部的代码的位置:

    https://github.com/GainLoss/permanent-position

  • 相关阅读:
    观察者设计模式
    JSP中用jsp:param传递中文参数出现乱码
    使用.msi进行安装mysql程序(超详细)
    扒来的lstdc++.6.0.9有效解决方案
    HTML响应状态码
    砸壳
    ipv6
    犀利的文章
    安装ReactNative开发IDE
    创建ReactNative的iOS项目
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6295520.html
Copyright © 2011-2022 走看看