后使用快捷导航没有帐号？
只需一步，快速开始
查看: 13038|回复: 12
有些页面中，拉动滚动条，本来页面中的一个div会浮动固定到页面顶部，怎么实现呢
UID15533在线时间 小时积分629帖子离线17146 天注册时间
高级会员, 积分 629, 距离下一级还需 371 积分
比如京东，商品详情页，向下拉动页面，
商品详情，评论之类的标签会一直固定在顶部
应该有现成的插件吧&&但是不知道用什么名字来搜
UID657579在线时间 小时积分2434帖子离线17146 天注册时间
银牌会员, 积分 2434, 距离下一级还需 566 积分
没啥名字吧，逻辑挺简单的一个事件，稍微有点难度的地方可能就是浮动层的位置定位了，比如浮动层不是贴边的那种，在定位时就要考虑层次的问题，不能使用left或者right，毕竟窗口大小是不定的，需要用div层次来固定位置。
UID15533在线时间 小时积分629帖子离线17146 天注册时间
高级会员, 积分 629, 距离下一级还需 371 积分
用jq，用$(window).scroll()事件监听scrollTop
谢谢，我用这些关键词搜搜看
另外我想问一下 这个效果叫什么名字&&现在用的挺广泛的
UID657579在线时间 小时积分2434帖子离线17146 天注册时间
银牌会员, 积分 2434, 距离下一级还需 566 积分
用jq，用$(window).scroll()事件监听scrollTop
UID363158在线时间 小时积分749帖子离线17146 天注册时间
高级会员, 积分 749, 距离下一级还需 251 积分
纯css，不可能
UID15533在线时间 小时积分629帖子离线17146 天注册时间
高级会员, 积分 629, 距离下一级还需 371 积分
不考虑太多用 position:fixed
但是这样就一直固定了，比如这个页面上面的导航栏，本来在距离top大概100px的位置&&当页面向下滚动，导航栏要到页面外面的时候，他就固定在top为0的地方，这个过程怎么实现呢
UID363158在线时间 小时积分749帖子离线17146 天注册时间
高级会员, 积分 749, 距离下一级还需 251 积分
不考虑太多用 position:fixed
UID617273在线时间 小时积分750帖子离线17146 天注册时间
提示: 作者被禁止或删除。
UID591906在线时间 小时积分2298帖子离线17146 天注册时间
银牌会员, 积分 2298, 距离下一级还需 702 积分
UID15533在线时间 小时积分629帖子离线17146 天注册时间
高级会员, 积分 629, 距离下一级还需 371 积分
/qianduanzixun/qianduanzhizuo/6.html& &不谢
要谢谢的& &还要谢谢各位
UID418019在线时间 小时积分1591帖子离线17146 天注册时间
银牌会员, 积分 1591, 距离下一级还需 1409 积分
UID536289在线时间 小时积分3582帖子离线17146 天注册时间
金牌会员, 积分 3582, 距离下一级还需 1418 积分
判断现在滚动多少，达到滚动距离，然后就固定不变了，
UID680176在线时间 小时积分9帖子离线17146 天注册时间
新手上路, 积分 9, 距离下一级还需 41 积分
楼主在不，你的问题解决了吗？我也遇到了一样的问题，可以分享下吗？
Powered by10:32 提问
html,css手机滚动条滑动的时候显示滚动条，不滑动的时候滚动条隐藏
html,css手机滚动条滑动的时候显示滚动条，不滑动的时候滚动条隐藏
按赞数排序
默认就是啊。可以用下面的css美化一下：
::-webkit-scrollbar {width: 5height: 5}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {border-radius: 999border:0}
::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100,100,100,.2)}
::-webkit-scrollbar-thumb {min-height: 20background-clip: content-box-shadow: 0 0 0 5px rgba(100,100,100,.5)}
::-webkit-scrollbar-corner {background:;transparent}
一般默认就是自动出来吧
其他相似问题标签： , , , , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
发表评论（目前33 条评论）
热门总排行移动端页面开发过程中经常碰到的一些问题-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 移动端页面开发过程中经常碰到的一些问题
移动端页面开发过程中经常碰到的一些问题
时间：&&&文章来源：马海祥博客&&&访问次数：
对于前端开发者来说移动端存在着很多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题，那么今天我为大家分享移动端页面开发过程中的一些问题和解决问题的方法技巧。
移动端页面在不同设备、不同操作系统、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6来说，现在的问题要多了很多。
现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂（当然主要是只在android端，大家懂的），而且有些样式在PC端页面上可能没什么，但是一旦到了手机页面，那就有可能是&大坑&，下面是本人自己开发手机页面过程中总结的一些问题，在此借助马海祥博客的平台跟大家分享一下，避免以后再次去犯。
访问者对网站的第一印象就是网页的外观，一个好的网页外观能带给人绝妙的视觉效果，视觉效果好的页面背景，可以为网站起到锦上添花的作用，还可能让访问者对网站留下深刻的印象（具体可查看马海祥博客《》的相关介绍）。
A、页面高度渲染错误
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：
document.documentElement.style.height = window.innerHeight + 'px';
B、叠加区高亮
在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);
关于行为方面，我这里主要跟大家分享一下事件无法被触发和active效果不兼容的问题：
A、事件无法被触发
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。
B、:active 效果不兼容
在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:
var element=document.getElementsById(&btnShare&);
element.addEventListener(&touchstart&,function(){},false);
在开发面向现代智能手机的移动Web应用的时候，无法避免一个事实，就是需要开发页面应用，对于不同的系统需求，页面应用的粒度会不同，可能是整个系统都使用一个页面装载，也可能是按模块分为独立页面装载，对此，我们也不妨来看一下在应用过程中经常遇到的一些问题及解决方法：
A、浏览器崩溃
var act = function(){
&window.removeEventListener('devicemotion',act);
window.addEventListener('devicemotion',act,false);
解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。
B、预加载、自动播放无效
如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
C、无法同时播放多音频
在android设备中，播放后一音频会打断前一音频，而不会同步播放，这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。
D、不支持局部滚动
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案：
①、巧用布局直接设置样式滚动条在body(html)上，其他元素&错觉滚动&。
②、利用iscroll、自写js控制translate、scrollTop模拟。
4、系统/硬件
关于系统或硬件方面，我主要碰到以下几个问题，在此，也简单的跟大家描述一下，并提供一下解决方法：
A、怪异悬浮的表单
在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security:隐藏输入密码从而解决。
B、错误出现滚动条
在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden无效，通过一系列尝试使用古老的 &body scroll=&no&& 写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！
C、链接打开系统浏览器
在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验，那么我们尝试给这个元素添加 target=&_blank& 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。
D、Flex box 不兼容
在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，导致错误，所以我们写完整历史版本的3种Flex box解决，那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少一些不必要的麻烦。
5、代码属性的问题
在移动端页面开发过程中，由于技术还不够完善和稳定，我们也经常会因为代码属性的问题导致页面出现很多千奇百怪的问题，这也是开发人员最为烦恼的问题，在此，马海祥也分享几个常见的问题：
（1）、overflow-x
这真的是一个大坑，一旦你在body或者html上用了这个属性，对不起，如果你的页面出现滚动条的话，那就会出现莫名其妙的bug，滑动页面的时候fix在顶部或者底部的会挡住，不知道有人遇到这样的情况没有，我是遇到了，坑死了。
解决办法：html跟body不要使用这个属性，如果不想让横向出现滚动，就用overflow:overflow-y:
（2）、calc()
这个本就是css3中的新方法，用起来其实是很爽的，无奈android不支持，大家最好别用，除非你不考虑android用户。
（3）、display:fix
这个是css3的新属性，用来做弹性布局的，ios上是十分OK的，然而android不支持，为了不被坑，别用。
（4）、-webkit-overflow-scrolling:touch
这个属性不是坑，他是用来让ios上的滚动条更加顺滑流畅的，亲测android上没有啥大的变化，但是ios有，不算坑，为了增强用户体验，大家可以用上，给出现滚动条的标签加上这个样式。
（5）、jquery中的html()方法
如果input的type为tel类型，然后你用html()方法取出某个值填入这个input，这个input在android手机上会显示诸如&&a href=&faketel:****&&&/a&&类似的字符窜。
解决办法就是用text()方法去取这个值然后填入这个input中，说白了还是html()跟text()方法的用法不一样，html()方法取的是html的内容，并非是纯文本，而text()方法取出的是纯文本，不会被浏览器解析，算是一个教训！
（6）、keyup和keydown在IOS设备上失效
如果你在IOS设备上用第三方输入法是无法用keyup事件来监听的，因为ios系统做了屏蔽机制，第三方输入法的事件系统是不管的，那么我们可以换种思路，去监听input的值变化事件，替换方案如下：
$('#input').bind('input propertychange', function() {
&&&&&&&&&&&&&&& alert(&....&)
&&&&&&&&&&& });
（7）、给body加position:relative
比如给移动页面做个弹幕的效果，在body里面会有个div一直滚动，从右向左，然后这个div是absolulte的，那一定要给body加relative，否则ios的手机会出现横向滚动条。
7、学会如何去解决问题
面对这么多坑，还有各种各样已经的和未知的坑，时间上也不可能一一讲完，更不可能都已经有解决方案，我们需要学会如何去解决这些问题。
解决坑首先自己需要有个强有力的执行力，通过不断去尝试来探索未知的问题，那么一般我们会通过哪些方式哪些步骤和技巧来尝试呢？
（1）、定位问题
首先我们需要定位问题，我们可以使用下列方法：
A、DOM隔离定位法
不断由大范围到小范围隔离出DOM，从而找出、触发问题的DOM元素。
B、样式、JS剔除法
不断剔除一些JS、CSS观察调试检查是否是由部分JS、CSS属性引起问题。
C、多运行环境测试法
在多环境中测试，排查是否是由于特定环境引起（具体可查看马海祥博客《》的相关介绍）。
D、PC与手机联合调试法
联合PC与手机进行定位，如：通过Mac远程调试iPhone/iPad。
（2）、解决问题的方式
我们解决问题可以尝试如下的方式：
* 尝试、转思维、绕解决
* 优雅降权、区分处理、沟通
* 搜索与提问&&
和以下的思维：
（3）、学会解决问题
在解决问题的过程中我们需要学会利用搜索和沟通资源解决问题：
A、google、百度
B、行业博客及社区
C、同事、朋友、QQ群、论坛等。
搜索引擎和行业博客及社区让你更容易更精确的快速搜索出问题相关的资料，同时、朋友QQ群、论坛等让你可以直接的跟人沟通出别人所遇到的问题及解决方案。
（4）、学会如何总结问题
在发现、解决问题后，更重要的是要学会如何总结问题：
A、总结记录问题产生条件、解决方法和解决过程。
B、尽可能分析原理、产生的条件，避免重蹈覆辙。
C、分享给更多的人。
无穷无尽的坑，走的人多了，总结分享的多了，坑也就越来越平了。
我在总结记录问题的同时，整理了一个移动端小贴士，记录问题与一些坑，虽然目前还不完善但是希望能分享给更多的人也希望更多的人能参与完善。
马海祥博客点评：
对于移动端网页，用户体验始终是大问题，交互式使用好的客户端可以在很多方面给用户带来不同的感觉和享受，因此，重视移动端的用户体验，就可以给客户端增加很多意想不到的功能，这样赋予这种软件其他的不同凡响，渐渐的就能让用户越积越多，这样才是交互功能一种好的体现。
本文为原创文章，如想转载，请注明原文网址摘自于/ydseo/1529.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
客户生命周期是指从一个客户开始对企业进行了解或企业欲对某一客户进行开发开始，直到客户与企业的业务关系……
链接是指在电子计算机程序的各模块之间传递参数和控制命令，并把它们组成一个可执行的整体的过程。链接也称……
8月22日上午消息，360董事长周鸿祎今日在第二季度财报电话会议上表示，360全站推自主搜索引擎以来，流量增……
相信做个seo的，或者自己已经是站长的，都或多或少的对自己负责……
其实早在互联网时代来临的时候，雅虎是最流行的搜索引擎。但随着……
在Windows操作系统中，IIS日志记录应该视为ISS所必需的而不是可……
从搜索引擎优化服务开始，分析了现在所存在的搜索引擎优化的作弊……
我一直觉得要想做好SEO，要做大一个网站，需要的不光是我们的坚……
相信很多站长或SEO都知道IIS日志的存在，可是很多人却并不重视它……
本月热点文章html中去掉textarea右侧滚动条和右下角拖拽-常用代码-Css教程-壹聚教程网html中去掉textarea右侧滚动条和右下角拖拽
textarea的属性是可以在内容过长有滚动条，在高版本的浏览器中还可以拖大输入框了，那么我们下文的重点就为各位介绍textarea去掉右侧滚动条和右下角拖拽的方法，具体如下。
我们经常会把去掉html页面的滚动条了，通常如下
掉左右滚动条，保留上下滚动条：&body style=&overflow-x:overflow-y:&&
如果页面头部有：&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
需要去掉该代码，或者改为：&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&
结果发现不能在textara中使用，找了一段css
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:# /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
测试发现也无效了，那么要怎么才可以去掉右侧滚动条和右下角拖拽
在使用表单中的textarea标签时，有以下需要注意的地方：
1、去掉右侧滚动条：
&textarea& style= &overflow:& && &/textarea&
2、去掉右下角的拖拽标记：
&textarea& style= &resize: && &/textarea&
解释：HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：
补充:隐藏textarea的滚动条
要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的条，在style属性中增加overflow-x属性控制，如下：
&textarea id=txtComments style=&overflow-x:hidden&&&/textarea&
相应的，若要隐藏纵向滚动条：
&textarea id=txtComments style=&overflow-y:hidden&&&/textarea&
如果使用代码控制的话，可能需要如下代码实现：
document.all(&txtComments&).style.overflowX=&hidden&;
overflow-x,overflow-y的可取值为：visible(默认取值),hidden,auto,scroll。
visible:始终不显示滚动条，文本区域的大小会根据内容的增加，自动增长，以显示全部内容。
scroll:不管文本区域里的内容有多少，始终显示滚动条。
hidden:始终不显示滚动条，内容超出层面的对象是不显示。
auto:如果内容在文本区域内可以全部显示,滚动条不显示,当内容无法全部显示时,内容被截断,加上滚动条显示所有内容。
上一页： &&&&&下一页：相关内容}