Question

嗨我在重新调整浏览器窗口大小后也在修复固定/固定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>

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

Answer 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的元素，看起来您的目标是标识为header的元素。但是，#header与$cache的元素相同，非常令人困惑。

Answer 2

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

你根本不需要load，如下所示：

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

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

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

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

2 个答案: