2

好吧，我正在一个小型网站上工作。

但是我有固定位置的问题。

我的标题宽度为 770 像素。它包含几个元素。

位置：固定；工作得很好，但是当我将我的网站调整为另一个屏幕尺寸时，固定元素（标题）的宽度不能完全可见，比如 640x480。

我希望它被固定以进行滚动，但我希望它在宽度上完全可见，如果用户在较小的屏幕上并且无法完全看到它。

这是一个关于 wordpress 主题的示例。

http://dvl-den.net/

我的小项目也有同样的问题。尝试在 640x480（调整浏览器大小）上打开该网站，您会看到我的问题。

提前致谢。

4

3 回答 3

1

我不认为只有 CSS 属性的解决方案。我会尝试使用position: absolute;我的 CSS，并使用 JavaScript（我的示例需要 jQuery），例如：

jQuery(function($) { // document ready
    var $win = $(window),
        handler = function() {
            // try not to overload browser, creating a throttle
            var throttle,
                throttleFn = function() {
                    // this is what happens on window resize
                    $('#header').css({
                        top: $win.scrollTop()
                    });
                };
            return function() {
                clearTimeout(throttle);
                throttle = setTimeout(throttleFn, 100);
            };
    };
    $win.resize(handler());
});

它在移动设备中并不是很“酷”，但众所周知，Web 应用程序中的固定标头存在移动问题（与本机不同）。如果您需要，我可以使用 JSFiddle 示例进行更新。

查看演示：http: //jsfiddle.net/qaKT7/（您可以使用 100 值来获得更好的体验，也可以使用.animate()而不是.css()让它看起来更漂亮）

于 2012-07-31T02:22:54.553 回答
1

尝试给予

min-width:770px;

或尝试media queries

于 2012-07-31T02:37:24.317 回答
0

我认为有两种方法：

  1. 将宽度“770px”更改为百分比。
  2. 检测屏幕的像素高度，然后据此调整宽度。
于 2012-07-31T05:35:19.457 回答