• 注册
  • 网络编程
  • 今日 0
  • 帖子 12
  • 关注 1
  • 热门论坛

  • 玩游戏赚钱
    玩游戏赚钱
    游戏赚钱版块,提供可以赚钱的网络游戏,专注于挖掘电脑端游与手游赚钱方法。欢迎关注和阅读游戏赚钱分类的精彩内容。
  • 商机发布交流
    商机发布交流
    本站为本站会员提供DNF商机倒卖囤货发布交流
  • 网赚项目
    网赚项目
    为您免费提供网赚项目、最新赚钱项目,不收取任何费用,只要您用心就能赚到钱!
    • 支付宝
    • QQ
    • 微信

    游赚笔记坚持一个资源共享的理念来供应大家学习游赚网赚,也因此,游赚笔记不能像其他站一样来获得收益。如果你不想让本站倒闭,可以选择充值金币或者开通会员,如果你什么都不需要,你也可以扫上面的二维码,直接支持游赚笔记!(注:捐款时,请备注捐助后面跟上用户名,例:捐助-游赚笔记)

    点我加入本站交流群

    BBS JavaScript 关注:1 内容:12

    使用JQ完成div滑动到一个位置开始固定

  • 查看作者
  • 打赏作者
  • 拉黑名单
  • 当前位置: 游赚笔记 > 网络编程 > JavaScript > 正文
    lv.25
    宇宙之主
    巴菲特

    这几天做一个页面,用到div滑动到一定的位置然后固定,查找了好久的资料才解决,这里做一个总结。

    下面我会贴出代码,代码中会详细解释,如果有不懂的可以给我留言。

    注:

         1、 单纯的copy一下代码是看不到运行的效果的,需要在第一个div和最后一个div里面添加足够多的内容,直到页面可以出现滚动效果才可以。

        2、代码唯一要改的地方就是JQ核心文件和添加足够的div

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <!--引入JQuery核心js文件-->
    <script type="text/javascript" src="js/jquery_js/jquery-1.11.3.min.js" ></script>
    <style>
    /*这个css样式就是固定div的*/
    .sfixed{
    position:fixed;
    top: 1000px;
    left: 0px;
    z-index: 10;
    }
    .scroll{
    margin-left: 200px;
    border: 1px red solid;
    width: 20%;
    height: 10px;
    }
    </style>
    <script>
    $(function(){
    // 函数offset()的作用是返回调用者当前的位置
    // 获取你所要开始固定的位置
    var top1 = $(".scroll").offset().top;
    $(window).scroll(function(){
    // 动态获取当前页面的位置
    var win_top = $(this).scrollTop();
    // 动态获取需要固定的div的位置
    var top = $(".scroll").offset().top;
    // 把当前页面位置和要固定div的位置想对比
    // 如果页面位置大于等于需要固定的div位置说明此时需要固定了,
    // 只需要给它添加一个css样式即可
    if(win_top >= top){
    $(".scroll").addClass("sfixed");
    }
    //把当前页面位置和要固定div的位置想对比
    // 如果页面位置小于需要固定的div位置说明此时不需要固定,
    // 只需要给它移除之前添加的css样式即可
    if(win_top < top1){
    $(".scroll").removeClass("sfixed");
    }
    });
    });
    </script>
    <body>
    <div class="top">
    <div>
    内容1
    </div>
    </div>
    <div class="scroll">
    <!--这是需要固定的部分-->
    </div>
    <div class="bottom">
    <div>
    内容1
    </div>
    </div>
    </body>
    </html>

    请登录之后再进行评论

    登录
  • 发表内容
  • QQ交流群DNF内部技术交流
  • 做任务
  • 实时动态
  • 返回顶部