JQuery：修复 Div，包括重新调整窗口大小答案

【问题标题】：JQuery: Fix Div including re-sizing windowJQuery：修复 Div，包括重新调整窗口大小
【发布时间】：2014-05-12 10:40:31
【问题描述】：

您好，在重新调整浏览器窗口大小后，我也在处理固定/固定 Div。修复 Div 没问题，但我无法使用 jquery 自动调整宽度。我当前的代码是：

 <script type="text/javascript">
    $(window).load(function(){
        function fixDiv() {
            var $cache = $('.pin');
            if ($(window).scrollTop() > 100)
                $cache.css({'position': 'fixed', 'top': '10px', width: $('.pin-wrapper').width()});
           else
                $cache.css({'position': 'relative', 'top': 'auto', width: $('.pin-wrapper').width()});
        }
        $(window).scroll(fixDiv);
        fixDiv();
    });
    $(document).ready(function(){
        fixDiv();
    });
    $(window).resize(function(){
        fixDiv();
    });
</script>

Html 看起来像这样：

<div class="grid-12 parent"> <!-- Kolos 12.02.2014 -->
        <div class="pin-wrapper">
                <div id="header" class="main-menu-container grid-12 hide-mobile pin"></div></div></div>

感谢您的帮助干杯，卡罗尔

【问题讨论】：

您多次调用 fixDiv()。 $(window).on('load resize scroll', fixDiv); 就足够了。现在关于您的问题，您应该在 jsFiddle 上复制它。顺便说一句 'width': $('.header') 没有意义，你的选择器 .header 看起来不对，等等......
@A.沃尔夫，谢谢你的回复。它现在正在工作。
请将其放入答案并标记为已解决。祝你们有美好的一天:)
@jPO 我真的不确定 OP 如何解决他的问题编辑：我明白了，fixDiv() 方法的范围问题
我相信他在他的代码中加上了 +"px"，但他应该自己回答，然后将他的代码标记为已回答，因为这可能对其他人有帮助。只是因此

标签： jquery css scroll resize fixed

【解决方案1】：

您正面临范围界定问题，fixDiv() 方法在 onload 处理程序中被声明。你可以改用：

function fixDiv() {
    var $cache = $('.pin');
    if ($(window).scrollTop() > 100) $cache.css({
        'position': 'fixed',
        'top': '10px',
        width: $('.pin-wrapper').width()
    });
    else $cache.css({
        'position': 'relative',
        'top': 0,
        'width': $('#header').width()
    });
}
$(window).on('load resize scroll', fixDiv);

但在您发布的 HTML 标记中，似乎没有类为 header 的元素，看起来您正在定位 ID 为 header 的元素。但是，#header 和$cache 是同一个元素，相当混乱。

【讨论】：

很抱歉，在此更改之后，div 不再固定。
@AtelierBasel 控制台错误？无论如何，如果您需要相关帮助，我们需要查看您的所有相关代码。 jsFiddle 怎么样？！
我在他的代码中没有看到'width': $('.header') 没有？
@Andrei 问题已编辑，请参阅修订历史。那么 OP 使用的是哪个代码就变得不清楚了......
哦，好吧，你是对的。尽管如此，在我使用 OP 代码创建的 jsFiddle 中并完全删除了load，代码仍然有效。

【解决方案2】：

正如 A. Wolff 所说，您不应该在 load 函数中添加您的事件。因为你这样做了，所以你的滚动事件没有被触发。

您实际上根本不需要load，如下所示：

http://jsfiddle.net/uwkc9/3/

如果您使用scroll 或resize，您会发现两者都有效。

此外，从实践中，我建议将您的 scroll 和 resize 事件分开以使用单独的函数。在功能中维护会更容易。

【讨论】：