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
订阅 fixed