在响应式页面中，中间内容里的图片随着浏览器滚动，当滚动到内容底部时固定位置停止滚动

qq_38646171 2018-02-08 08:58:41

在响应式页面中，中间内容里的图片随着浏览器滚动而上下滑动，当滑动到中间内容底部时固定位置停止滑动

...全文

1098 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

winzond 2018-03-11

打赏
举报

回复

可不可以这样操作，把它们分别放在两个容器中，容器1随屏幕划动，容器2固定位置，默认显示容器1，隐藏容器2，当容器1溢出不在屏幕上时，容器2显示

1.前端WEB响应式布局实战-搭建项目2.前端WEB响应式布局实战-响应式头部3.端WEB响应式布局实战-banner&footer4.端WEB响应式布局实战-service部分5.前端WEB响应式布局实战-team部分8.前端WEB响应式布局实战-页面样式调试-首页js效果实现9.前端WEB响应式布局实战-完善各页面js效果10.前端WEB响应式布局实战-项目测试发布

前言设计很丰满，数据很骨感。有时候我们根据设计师的设计稿去编写页面代码，接入正式的数据后，可能数据不多，渲染后并不足以使得页面占满一屏。而公共的底部元素，需要固定在底部展示；当内容足以撑满一屏时，底部元素又随页面滚动。常见处理之前做PC端的项目，是使用jQuery编写代码。在页面加载后，通过js代码去判断内容是否超出浏览器的可视高度，根据判断结果，动态地给公共底部元素设置样式。存...

思路： 1：本人是基于vue框架，在使用offsetTop的时候找不到body所以首先用递归找到body 2：找出每一块内容的距离顶部的距离存起来 3：调用浏览器滚动事件 4:在事件内循环元素距离顶部的数组{ if(，如果浏览器滚动的距离+100（这个100是自己根据情况而定的，我的一百是基于元素的顶部标题位置）>=每一块内容的距离顶部[0]){ this.indexx=index }} 5：通过vue的底层元素给导航绑定：：class=‘indexx==index’?‘高亮样式’：‘’ 整个思

问题描述：由于有的table中的列比较多，那么table可能就会出现横向滚动条，但是table本身的滚动条是在table的底部的，这就导致每次想看一条数据的后面几列的时候，需要鼠标先往下滑动，找到横向滚动条，然后再向右滑动，然后还得可能再往上滑动，找到想看的那条数据的后面几列，这种方式非常惹恼用户，所以需要解决。解决办法：如下图，我们需要的是要让滚动条一直显示在屏幕的最下边，无论你的table多高。我们可以使用div 的横向滚动条。要想滚动条出现在屏幕底布的话，肯定需要div里面包...

页面布局后，底部出现横向滚动条解决方法： 1：查看是从哪个部位开始出现滚动条 2：给包裹的元素添加属性：box-sizing:border-box 3:整体包裹元素添加熟悉：box-sizing:border-box；overflow：auto; 具体在看情况吧！发正我的这样解决了bug...

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章