Question

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

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

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

位置：固定;工作得很好，但是当我将我的网站大小调整到另一个屏幕尺寸时，像640x480这样的固定元素（标题）在宽度上不能完全可见。

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

以下是wordpress主题的示例。

http://dvl-den.net/

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

提前致谢。

Answer 1

我不认为只有CSS属性的解决方案。我尝试在我的CSS上使用position: absolute;，并使用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());
});

它在移动设备中并不真正“酷”，但它广泛知道在网络应用程序中存在固定标头的移动问题（与本机不同）。如果您需要，我可以使用JSFiddle示例进行更新。

检查演示位置：http://jsfiddle.net/qaKT7/（您可以使用该100值来获得更好的体验，并使用.animate()代替.css()以使其看起来更漂亮）

Answer 2

尝试给予

min-width:770px;

或尝试使用media queries

Answer 3

我认为有两种方式：

将宽度“770px”更改为百分比。
检测屏幕的像素高度，然后根据此调整宽度。

固定位置宽度

3 个答案: