<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scroll</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    header{

        width: 100%;

        height: 100px;

        background:rgba(0,0,0,0.8);

        position: fixed;

        left: 0;

        top: 0;

        text-align: center;

        font-size: 25px;

        line-height: 100px;

        color: #fff;

        font-family: "微软雅黑";

    }

    footer{

        width: 100%;

        height: 300px;

        background:rgba(0,0,0,0.8);

        text-align: center;

        font-size: 25px;

        line-height: 100px;

        color: #fff;

        font-family: "微软雅黑";

    }

    .content{

        width: 100%;

        height: 2500px;

    }

    .btn{

        position: fixed;

        left: 60%;

        bottom: 5px;

        padding: 15px 30px;

        border-radius: 10px;

        background:green;

        color: #fff;

        font-size: 25px;

        cursor: pointer;

    }

</style>

<body>

    <header>

        scroll  与  按钮的位置

    </header>

    <div class="content"></div>

    <footer> 按钮在footer顶部</footer>

    <div class="btn">我在屏幕最舒服的位置</div>

</body>

<script src = "jquery.js"></script>

<script>

    $(window).scroll(function(){

        var btn = $(".btn");

        var scrollTop = $(document).scrollTop(); //滚动条到顶部的距离

        var textHeight = $(".content").height() + $("footer").height(); //文档的高度

        var pageHeight = $(window).height() //当前页面的高度

        var scrollBottom = textHeight - pageHeight - scrollTop; //滚动条到底部的距离

        var footerHerght = $("footer").height(); //footer的高度

        var value = 100;

        console.log(scrollBottom);

        if(scrollBottom < footerHerght){

            //滚动条到底部的距离 小于 footer高度 按钮放在footer之上

            btn.css("bottom", footerHerght - scrollBottom + 5  + 'px' )

        }else{

            btn.css("bottom", "5px");

        }

    })

</script>

</html>

scroll与按钮的位置的更多相关文章

  1. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  2. 使用RelativeLayout控制WebView以及Bottom按钮的位置

    使用RelativeLayout控制WebView以及Bottom按钮的位置 (地址) 在Design View中加入控件RelativeLayout, WebView, LinearLayout(H ...

  3. jQuery实现两个按钮的位置互换

    页面上有2个按钮A和B.点击按钮A和按钮B互换位置 ,点击按钮B和按钮A互换位置.应该如何实现? html代码如下: <body> <!--页面上有2个按钮A和B. 点击按钮A和按钮 ...

  4. 微信小程序：scroll滑到指定位置

    概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...

  5. iOS开发项目之四 [ 调整自定义tabbar的位置与加号按钮的位置]

    自定义tabbar与按钮的添加 01 - 把系统的tabbar用我们自己的覆盖 LHQTabBar *lhqTabBar = [[LHQTabBar alloc]init]; [self setVal ...

  6. VB6之调整任务栏按钮的位置

    好无聊,睡前一更~ XP的任务栏没办法像win7那样随意拖动交换顺序,偶觉不爽,遂写程序搞之.这个不算什么新东西,参考了很多别人写的东东. 程序启动后,会在右下角托盘区显示钢铁侠的图标.右键击之,可选 ...

  7. 使用flex布局调换两个按钮的位置

    组件用的时antd的Modal组件,里面的按钮需要调换一下位置 今天发现用flex布局非常方便,代码如下: display: flex; justify-content: center; flex-f ...

  8. 如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置

    今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件 但是antd组件的按钮时确认键放在右边的 可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的 ...

  9. Extjs的完成按钮和位置

    this.toolbar.add('->') ---重点是这个箭头,他是控制位置的 this.CompleteDataAction = new Ext.Action({ text : '完成', ...

随机推荐

  1. 吐槽在cocos2dx游戏接入腾讯信鸽的坑

    腾讯信鸽是用来在后台推送消息给移动应用客户端使用,接入方法很简单,在信鸽官网注册个账号 http://xg.qq.com/xg,然后注册一个应用,在后台页面获得ACCESS ID, ACCESS KE ...

  2. cocos2dx for lua 摄像机移动

    在cocos2dx中,我们想通过移动摄像机来做一些特殊处理,比如将摄像机聚焦在某个物体上,或者摄像机颤抖,摄像机原理观察sprite回收状况等等, 都需要通过相机移动来使用. cocos2dx中的摄像 ...

  3. 关于web安全--CSRF和XSS

    CSRF:跨站请求伪造. 攻击原理:一个用户登陆了可信的网站A,身份验证后A会下发一个cookie:此时用户又打开了另一个危险网站B,B引诱用户点击连接(该链接会访问A的接口),由于此时会携带cook ...

  4. 转 Solr vs. Elasticsearch谁是开源搜索引擎王者

    转 https://www.cnblogs.com/xiaoqi/p/6545314.html Solr vs. Elasticsearch谁是开源搜索引擎王者 当前是云计算和数据快速增长的时代,今天 ...

  5. day12-迭代器

    迭代器的概念 内部含有_next_和_iter_方法的就是迭代器. 可以被for循环的都是可迭代的,只有是可迭代对象,才能用for循环. 可迭代的内部都有_iter_方法——可迭代协议. 只要是迭代器 ...

  6. LA 5007 Detector Placement 模拟

    题意: 给出一束光线(射线),和一块三角形的棱镜 以及 棱镜的折射率,问光线能否射到X轴上,射到X轴上的坐标是多少. 分析: 其实直接模拟就好了,注意到题目中说不会发生全反射,所以如果射到棱镜中的话就 ...

  7. fhqtreap - Luogu 2464 [SDOI2008]郁闷的小J

    [SDOI2008]郁闷的小JJ 题目描述 小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的 ...

  8. C#中的扩展方法详解

    “扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.”这是msdn上说的,也就是你可以对String,Int,DataRow,DataTable等这些类 ...

  9. Huawei比赛数据分析

    如何评价2018年华为软件精英挑战赛赛题? https://www.zhihu.com/question/268448695 1.时间与时间戳之间的转换 https://blog.csdn.net/g ...

  10. Uiautomator ---(1) 封装代码

    http://www.cnblogs.com/by-dream/p/4996000.html  上面是别人的写法 我自己的写法: package qq.test; import android.con ...