Question

我正在寻找一种让你的div在放大时变得静止的方法。

尝试使用facebook作为示例。放大，当“topbar”内容超过屏幕的100％时，它变为静态，不再修复。我怎么做那样的东西？

我猜“topbar”内容是一个特定的宽度，当你缩放以使屏幕小于特定的宽度时，水平的scroolbar会显示出来，而“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

提前致谢。

Answer 1

$(window).resize(function() {         
    if ($(window).width() <= 800) {  // check width when window get's resized
      $('#topbar').css('position', 'static');
    } else {
      $('#topbar').css('position', 'fixed');
    }
});

Answer 2

它将使用css3媒体查询这样工作：

/* Place this after your css rules you show at your question */
@media screen and (min-width: 800px){
    #topbar {
        position: static;
    }
}

位置：固定到位置：水平滚动显示时静态？

2 个答案: