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

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

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