fixed

jQuery固定浮动侧边栏(jQuery fixed Sidebar)

断了今生、忘了曾经 提交于 2020-03-05 21:51:58
需要在页面引用jQuery库. 可以在 这里看demo . HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id="sidebar">Sidebar</div> </div> <div id="main">Main</div> <div id="footer">footer</div> CSS代码: body { margin: 10px auto; font-family: sans-serif; width: 500px; } div { border-radius: 5px; box-shadow: 1px 2px 5px rgba(0,0,0,0.3); border: 1px solid #ccc; padding: 5px; } #sidebarWrap { height: 400px; width: 210px; float: right; position: relative; box-shadow: none; border: none; margin: 0; padding: 0; } #main { width: 270px; height: 4000px; } #footer { clear: both; margin: 10px 0; } #sidebar { width:

IE7下当position:fixed遇到text-align:center

Deadly 提交于 2020-03-04 09:37:35
啥也不说,先看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7下当position:relative遇到text-align:center</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style type="text/css"> body{padding:0;margin:0} #wrap{text-align:center} #toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;} </style> </head> <body> <div id="wrap"> <div id="toolbar"></div> </div> </body>

移动端虚拟键盘和滚动穿透小结

北城余情 提交于 2020-02-27 12:56:02
记录一下最近遇到的两个小bug,也不算小bug,可能在不同的移动端浏览器表现不同吧。一个是虚拟键盘顶起,一个是滚动穿透问题。 首先需要明确的一点是,虚拟键盘的顶起在IOS端和Android端有很大的不同变现。 监听移动端软键盘弹起和收起 1. Android端 监听resize 1234567891011 var winHeight = $(window).height();$(window).resize(function () { var thisHeight = $(this).height(); if( winHeight - thisHeight > 140) { } else { // 键盘收起 }}) 2. IOS端 监听input失焦blur ios中的键盘或者第三方键盘并不会监听到 window resize 事件,所以不能用 resize 监听,所以需要通过输入框是否获取焦点来判断。 在Android中,有一些机型,键盘收起了,输入框仍处于焦点状态,并没有触发 focusout 事件。 因为 focusin 和 focusout 支持冒泡,对应focus和blur,所以根据需求,我们可以选择相应的事件。 1234567 $(document).on('focusin', function () {  //软键盘弹出的事件处理});$(document).on(

如何暂时禁用滚动?

坚强是说给别人听的谎言 提交于 2020-02-27 04:48:43
我使用的是scrollTo jQuery插件,想知道是否可以通过Java临时禁用window元素上的滚动吗? 我要禁用滚动的原因是,当您在scrollTo设置动画时滚动时,它真的很难看;) 当然,我可以做一个 $("body").css("overflow", "hidden"); 然后在动画停止时将其重新设置为自动,但是如果滚动条仍然可见但处于非活动状态会更好。 #1楼 只需在正文中添加一个类即可: .stop-scrolling { height: 100%; overflow: hidden; } 要在IE,FF,Safari和Chrome中进行测试,请添加类,然后在要重新启用滚动功能时将其删除。 $('body').addClass('stop-scrolling') 对于 移动设备 ,您需要处理 touchmove 事件: $('body').bind('touchmove', function(e){e.preventDefault()}) 并取消绑定以重新启用滚动。 在iOS6和Android 2.3.3中测试 $('body').unbind('touchmove') #2楼 这个怎么样? (如果您使用的是jQuery) var $window = $(window); var $body = $(window.document.body); window

table-layout:fixed 属性的解说

為{幸葍}努か 提交于 2020-02-25 12:44:29
able-layout:fixed 属性的解说 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题:firefox下,内容会飘出框外,暂时没有找到解决办法,如果有可以解决此方法的朋友,欢迎来帖,小妮子将十分感激! 例1:(IE浏览器)长串英文自动回行 方法:同时加入word-wrap:break-word; table{table-layout:fixed;word-wrap:break-word;} 例2:(IE浏览器)一个表格里的内容隐藏 方法:使用样式table-layout:fixed与nowrap(一行一列) <style> .tbl {table-layout:fixed} </style> <table class=tbl border=1 width=80> <tr> <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td> </tr> </table> 效果: abcdefghigklmnopqrstuvwxyz 1234567890 width=80起作用了,换行也被干掉了。 例3:(IE\Firefox浏览器

css中定位的用法

╄→尐↘猪︶ㄣ 提交于 2020-02-24 05:17:13
定位 定位(position):用来检索或者设置元素的定位方式(改变元素位置的属性) position的属性值有static、absolute、relative、fixed、sticky 注:使用了定位属性margin:auto会失效。 使用定位的步骤 1:给元素添加position属性 2:寻找参照物 3:添加坐标(四坐标:top、bottom、left、right) 静态定位(static) position的默认值,默认文本流的状态。 不会识别left right top bottom指定的坐标 注:加了静态定位等于无作用,默认值不识别坐标。如下图 绝对定位(absolute) 1: 参照物:按照已经有定位的父元素进行位置的变化。 2: 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。 3: 绝对定位,脱离文档流、不占据空间 注:此图父子元素都用了绝对定位,根据坐标进行了移动。 相对定位(relative) 1 : 参照物:自身默认的位置! 2 : 始终占据空间,不会破坏文档流 注:以下两图可做对比 固定定位(fixed) 1 : 参照物:浏览器窗口 2 : 脱离文本流,不占据空间 注:比较下面两图可知红色盒子固定位置了! 黏性定位(sticky) 1:position:relative 和 position:fixed的结合。 2:页面没超出窗口范围

Ios 若干兼容处理

戏子无情 提交于 2020-02-21 23:58:08
最后处理兼容真是各种苦逼,还算好,最后解决了,再此总结一下 position:fixed 和 input 的问题? ios 对position:fixed 的定位处理兼容性不是很好,例如,在同时又input的时候,小键盘会将其定位内容顶起,处理方法:网上有各种方式,我处理是没有用position:fixed ;而是用position:absoutle 代替; 在使用position:fixed 定位到顶部或底部的时候,内容滚动,会出现定位内容消失,这个时候需要将滚动内容在外层套个 ; 3.ios默认样式会覆盖掉原样式: 放到公共文件里; input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none;} ios input光标定位不准或者覆盖placeHolder字体: *:not(input,textarea) { -webkit-touch-callout: none; -webkit-user-select: none; } input{ -webkit-user-select:auto; } 5.ios光标大小的调整? font-szie 和line-height 大小一致即可

Spring Schedule 实现定时任务

流过昼夜 提交于 2020-02-19 17:57:56
很多时候我们都需要为系统建立一个定时任务来帮我们做一些事情,SpringBoot 已经帮我们实现好了一个,我们只需要直接使用即可,当然你也可以不用 SpringBoot 自带的定时任务,整合 Quartz 很多时候也是一个不错的选择。 Spring Schedule 实现定时任务 我们只需要 SpringBoot 项目最基本的依赖即可,所以这里就不贴配置文件了。 1. 创建一个 scheduled task 我们使用 @Scheduled 注解就能很方便地创建一个定时任务,下面的代码中涵盖了 @Scheduled 的常见用法,包括:固定速率执行、固定延迟执行、初始延迟执行、使用 Cron 表达式执行定时任务。 Cron 表达式: 主要用于定时作业(定时任务)系统定义执行时间或执行频率的表达式,非常厉害,你可以通过 Cron 表达式进行设置定时任务每天或者每个月什么时候执行等等操作。 推荐一个在线Cron表达式生成器: http://cron.qqe2.com/ import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype

Position:fixed to work on IE 6/7/8 and mozilla

我的梦境 提交于 2020-02-16 07:25:59
问题 I want to make a div's position fixed on the bottom right of a page..( a chat box) ..how do i do that through a css file which will work on all IE6/7/8 and mozilla ....for now i have #chatBox{ position: fixed; bottom: 0%; right: 1%;} This doesn't work on IE..and my constraint is that I am just allowed to edit this CSS file ( so can't set the html to strict mode too). Workarounds I found on the web just talk about position w.r.t to the top of the page not bottom. thanks Mohan 回答1: You can fix

Position:fixed to work on IE 6/7/8 and mozilla

狂风中的少年 提交于 2020-02-16 07:24:13
问题 I want to make a div's position fixed on the bottom right of a page..( a chat box) ..how do i do that through a css file which will work on all IE6/7/8 and mozilla ....for now i have #chatBox{ position: fixed; bottom: 0%; right: 1%;} This doesn't work on IE..and my constraint is that I am just allowed to edit this CSS file ( so can't set the html to strict mode too). Workarounds I found on the web just talk about position w.r.t to the top of the page not bottom. thanks Mohan 回答1: You can fix