位置:固定到位置:显示水平滚动时为静态


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;
    }
}