html - 固定位置宽度

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

它在移动设备上并不是很“酷”，但众所周知，网络应用程序(不同于 native )中的固定 header 存在移动问题。如果您需要，我可以使用 JSFiddle 示例进行更新。

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