位置:固定到位置:显示水平滚动时为静态
Position: fixed to position:static when horizontal scroll shows up?
我正在寻找一种方法,使我的div变成静态当你放大。
以facebook为例。放大后,当"顶部栏"的内容超过屏幕的100%时,它就变成了静态的,不再是固定的。我怎么才能做出那样的东西?我猜"topbar"内容是一个特定的宽度,当你缩放屏幕,使其小于特定的宽度水平滚动条显示和"topbar"div变成静态
用一些代码来总结。
#topbar {
width: 100%;
height: 40px;
position: fixed;
}
#topbar-content {
width: 800px;
height: 40px;
}
当屏幕小于800px时,顶部栏不再是position: fixed;
而变为position: static;
如果有什么不清楚的,请评论,我会尽量回答。我一直在尝试解决这个问题。;)
修复的首选语言是:html, css, javascript, jquery或php
$(window).resize(function() {
if ($(window).width() <= 800) { // check width when window get's resized
$('#topbar').css('position', 'static');
} else {
$('#topbar').css('position', 'fixed');
}
});
使用css3媒体查询的效果如下:
/* Place this after your css rules you show at your question */
@media screen and (min-width: 800px){
#topbar {
position: static;
}
}
相关文章:
- 当静态元素与滚动上的固定元素位置重叠时进行检测
- 导航栏固定底部位置,当到达滚动位置时切换到静态
- 使用CSS从相对静态位置编辑画布外的基本侧边栏
- 获取静态元素在主体上的位置
- WebGL - 获取光源的静态位置
- 如何本地化节点.js应用程序,每个区域设置具有不同的单词位置,混合静态和动态本地化文本
- 切换位置固定和静态
- 三.js - 保持对象相对于相机的位置静态
- jquery固定位置块,SWTICH到静态确定点
- 谷歌地图API:如何获得在中心有静态pin的可拖动地图,并在每次移动地图时获得这个pin的位置
- 如何在谷歌静态地图上获得连续位置
- 如何在调整窗口大小时保持固定位置导航的静态位置
- JQuery/CSS:静态位置动画
- Javascript将position属性更改为固定位置属性的每个样式的静态
- 如何制作浮动菜单->位置:静态的
- 如何改变Ember.js服务于静态资源的位置
- 位置:固定到位置:显示水平滚动时为静态
- 带有静态变量的地理位置数组
- jQuery position方法,如果CSS位置稍后被设置为静态以外的任何内容,则返回不同的值
- 项目位置类型从相对移动到静态效果