固定定位后scroll失效

2024-09-05

小程序之 fixed定位下scroll-view左右滚动失效

红框为悬浮左右可以滑动效果如下⬇️ 悬浮把最外层position:fixed;top:0;这个时候上面的导航就可以悬浮但是会出现左右滑动不了的情况这是因为我没给设置宽度这个时候我们把包着scroll-view的那个view设置宽度为100%就可以了 .hd { width: 100%; z-index: 1; position: fixed; top: ; background: #fff; border-bottom: 1px solid #eee; border-top: 1px

input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了很多方法尝试,最后是用css解决的. 就是给input框所在div的以外代码块一个position: fixed; top: 0px; bottom: -20px; overflow:scroll; width: 100% 例如你的代码结构是这样的: <style> .footer{positio

如何做出header，footer固定定位后让main主体部分可以滑动，在微信浏览器中滑动到最后不出现黑边的情况

<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <div class="header"></div> <div class="scroll main" style="position:absolute; overflow-y:

固定定位导致$(window).scrollTop();获取滚动后到顶部距离总是为0

如下移动端索引列表页面(点击某元素后弹出的页面) 我想用 $(window).scrollTop(); 获取页面滚动后距离顶部的距离,但获取到的值总是0 期间查了很久,但都无疾而终,后来看到一篇博客说是浮动影响了,抱着试一试的心态去清除浮动,然而并卵此时,我灵光一闪,难道是定位影响了?(这个弹出页面最外层用了 fiexd 固定定位) 于是我取消固定定位,终于可以用 $(window).scrollTop(); 获取到高度了正当我欣喜之时,页面布局出现混乱,因为取消固定定位后

行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·

行内元素进行绝对定位后会变成块级元素· position:absolute; <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* *{ padding: 0; margin: 0; } */ span{ position: absolute; /

固定定位下的div水平居中

发现了一个之前未留意的知识点,做个笔记. 当一个块级元素的父元素开启了flex布局后,我们可以很轻松的将这个元素居中对齐,可以在父元素上加 justify-content: center; align-items: center;/*单行下的居中对齐*/ 或 justify-content: center; align-content: center; flex-wrap: wrap;/*多行下的居中对齐*/ 然而,这种对齐方式是基于父元素开启了flex布局方式,假设该子元素开启了固定定位后,这

滚动条大于120px时，判断pc端的情况下，导航条固定定位

//滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var top=$(document).scrollTop(); if(viewWidth>=768&&top>=120){ $('.d_head_nav').css({ 'position':'fixed', 'top':"0px", "width&quo

iOS 固定定位不兼容、input获取焦点后位置不对。

第一次写博客~ 大家悠着看,有则改之,无则加冕,对不对的给个回复,让我知道你的存在. 在做活动页的时候,经常会碰到一些需要弹出显示的输入框(情节前提:本人安卓机~),前天自己写的时候自己调试没问题后发给测试,直接与我对接的测试告诉我没问题了,让同事看下就可以上线了,幸福满满的我准备休息一会. BUT!!!BUT!!!BUT!!!,五分钟后她告诉我说问题有好多,而且全部都在iOS端!作为一个爱国人士(其实是没钱~)我是从不用苹果的,然后就经过N多时间的调试,从网上百度了好多方法,一直到下班,总于

理解CSS相对定位和固定定位

× 目录 [1]相对定位 [2]固定定位前面的话一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识相对定位定义可能理解起来最简单的定位机制就是相对定位了.采用这种机制时,通过使用偏移属性移动定位元素.当元素相对定位时,它会从其正常位置移走,不过,原来所占的空间并不会因此消失.相对定位元素,会为其

Bootstrap 固定定位（Affix）

来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定固定定位--声明式触发固定定位 Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:dat

CSS学习笔记10 相对定位，绝对定位与固定定位

文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置. position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.(忽略 top, bottom, left, right 或者 z-index 声明). relat

移动端底部fixed固定定位输入框ios下不兼容

简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法,因为每个页面的需求和布局可能不相同,比如我做的需要下拉刷新消息,上拉加载更多,用的是minit-UI来做,所以都没有效果后面无奈用了两套代码,用 var u = navigator.userAgent, app = navigator.appVersion;var isiOS = !!u.matc

IOS使用固定定位遇到的问题

近日需要实现移动端页面额外功能按钮,即点击加号弹出点赞与留言功能,通常这个按钮都会固定于页面的右下角,首先就想到使用固定定位来实现. 但是在测试时我们发现,在IOS中,当系统键盘弹出时,fixed会失效,加号按钮会随着键盘的弹出,而被顶到键盘的上方.后来在网上搜索了一下,发现很多开发者都有遇到过这个问题,因为电商网站会有很多这种需要用到固定定位的场景,于是去到淘宝的移动端页面,发现他们是通过使用绝对定位来实现固定定位的效果.方法如下: 页面结构如图首先设置一个box,大小等于页面窗口的大小,设

CSS——相对定位、绝对定位、固定定位

相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位移后,表面来看已经脱离了文本流,但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高. 绝对定位: position:absolute 相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这个位置不随他的

固定定位fixed，绝对定位absolute，相对定位relative；以及overflow

固定定位position:fixed /*固定定位 1.定位属性值:fixed 2.在页面中不再占位(浮起来了) 3.一旦定位后,定位的布局方位 top.bottom.left.right都能参与布局 4.固定定位的参考系是页面窗口(不是页面中的哪一点,而是四边参照四边) 5.左右同时存在,取左:同理上下取上 */ <style> body{ /*min-width设置区域的最小宽度,如果最小宽度超过页面的像素那么页面就会有横向滚动条*/ /*min-width: 2000px;*/ } .

Bootstrap_Javascript_固定定位

Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom. data-offset-top 用来设置元素距离顶部的距离.比如 90,表示元素距离顶部 90px,当用户从顶部向下拖

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边

angular 实现左侧和顶部固定定位布局

1 布局基于angular ng-zorro组件库实现由于项目中使用了组件库并且要求响应式布局,卡在这个坑上两天,多次调试后终于解决代码仅供参考,由于没有上传依赖的库和组件包无法直接运行,提供代码参考示例样式 html代码 <nz-layout class="container"> <nz-sider nzCollapsible [nzTrigger]="null" [(nzCollapsed)]="isCollapsed"

前端CSS - 相对定位,绝对定位,固定定位

前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了 position:relative; → 必须先声明,自己要相对定位了, left:100px; → 然后进行调整. top:150px; → 然后进行调整. 1.2 相对定位的特性 - 不脱标,老家留坑,形影分离相对定位不脱标,真实位置是在老家,只不过影子出去

pc端监听屏幕实现导航固定定位

要点:占位符 js,监听屏幕滚动事件,当滚动条距离浏览器顶部的距离大于要固定定位开始以下元素的距离,则给要固定元素添加fixed样式. 初始化方法时,要给占位符添加样式 function sortNavInit() { $(".consultBox").find(".sort-clone").css("height", $(".conditionList").outerHeight(false)); // .conditi

HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)

BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上向下堆放,行内元素从左往右地堆放,这就是一个标准的流程.(inline-block也属于常规流,暂且把它当作inline) 而浮动和绝对定位是脱离了常规流,改从左往右排,打破次元,从二维表面升起来了,跑到原来位置的上空了.(其实是别的元素在按照标准流布局时会忽略脱离标准流的元素,说浮起来并不准确,但

固定定位后scroll失效

热门专题