固定位置宽度

Question

嗯，我正在做一个小网站。

然而，我有固定位置的问题。

我的页眉宽度是770px。它包含几个元素。

位置:固定；工作真的很好，但是当我将我的网站调整到另一个屏幕尺寸时，像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());
});

它在移动端并不是很“酷”，但是大家都知道web应用中的固定头文件存在移动端的问题(不同于原生的)。如果您需要，我可以使用JSFiddle示例进行更新。

查看演示：http://jsfiddle.net/qaKT7/ (您可以尝试使用100值来获得更好的体验，也可以使用.animate()而不是.css()来使其看起来更华丽)

Answer 2

试着给予

min-width:770px;

或者尝试使用media queries

Answer 3

我认为有两种方法：

将percentage.

• Detecting的宽度"770px“改为

1. 的像素高度，然后根据这个调整宽度。