$(this).offset()为空

Question

我这里有个问题，我希望左手边的菜单在点击页面上的某个点时向下滑动，并且总是保持在顶部，试图用jQuery实现这一点。位置固定在css工作，但它不停留在顶部的窗口时，滑动的页面，留下了一个巨大的白色差距。jQuery新手来了..。

我得到了这个错误；

$(this).offset() is null

这里的完整代码

$(document).ready(function () {

$(window).scroll(function (event) {

    var container = this;

    var msie7 = $.browser.msie && $.browser.version < 8;

    if (!msie7) {
        var top = $(this).offset().top - parseFloat($(this).css('margin-top').replace(/auto/, 0));

        $(window).scroll(function (event) {

            var y = $(this).scrollTop() + 10;

            if (y >= top) {
                $(container).find("#dvContentAlpha").addClass('LeftMenuFixed');
            } else {
                $(container).find("#dvContentAlpha").removeClass('LeftMenuFixed');
            }
        });
    }
});
});

CSS

#dvContentAlpha
{
width: 145px;
float: left;
margin-right: 35px;
position:fixed;
}

.LeftMenuFixed {
float: left;
font-weight: bold;
position: fixed;
top: 10px;
width: 145px;
}

无法读取google铬检查元素中空<<错误消息的顶部

那么，我需要为顶部设定一个值吗？这里很困惑。

更新：

$(document).ready(function () {

$("div.homecontainer").each(function () {
    $(this).find("div.content-container").each(function () {

        var container = this;

        var msie7 = $.browser.msie && $.browser.version < 8;

        if (!msie7) {
            var top = $(this).offset().top - parseFloat($(this).css('margin-top').replace(/auto/, 0));

            $(window).scroll(function (event) {

                var y = $(this).scrollTop() + 10;

                if (y >= top) {
                    $(container).find("#dvContentAlpha").addClass('div.LeftMenuFixed');
                } else {
                       $(container).find("#dvContentAlpha").removeClass('div.LeftMenuFixed');
                }
            });
        }
    });
});
});

不会带来错误，但不会滑落

HTML在这里

<div class="homecontainer">
 <div class="content-container">
    <div id="dvContentAlpha">
        <asp:BulletedList ID="blSideNavigation" runat="server" CssClass="leftnav-links">
        </asp:BulletedList>
        <a id="aContact" runat="server"><img src="/Assets/Images/button-contact.jpg" alt="Contact Us" /></a>

        <div class="weatherwidget">
           <!-- Yahoo! Weather Badge --><iframe allowtransparency="true" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" 
           scrolling="no" src="http://uk.weather.yahoo.com/badge/?id=28218&u=c&t=default&l=vertical" height="255px" width="186px">
           </iframe><noscript>
           <a href="http://uk.weather.yahoo.com/england/greater-manchester/manchester-28218/">Manchester Weather</a> from 
           <%--<a href="http://uk.weather.yahoo.com">Yahoo! Weather</a>--%></noscript><!-- Yahoo! Weather Badge -->
        </div>
    </div>


<div id="dvContentBeta">
    <div id="dvContentEncapsulation" runat="server">
        <div id="dvContentEncapsulationInner" runat="server">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <div style="clear: both; float: none; height: 1px; overflow: hidden;">
                &nbsp;</div>
        </div>
    </div>
</div>
</div>
<div id="dvFooter">
</div>
</div>

我找到了一个更简单的解决方案来解决我的问题，为什么这个解决方案不能在我发帖之前出来呢！对于那些有类似问题的人，这就是我所使用的；

<script type="text/javascript">
$(function () {
    var offset = $("#dvContentAlpha").offset();
    var topPadding = 15;
    $(window).scroll(function () {
        if ($(window).scrollTop() > offset.top) {
            $("#dvContentAlpha").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $("#dvContentAlpha").stop().animate({
                marginTop: 0
            });
        };
    });
});
</script>

就像一种魅力！

Answer 1

在您的代码中，$(this)指的是没有偏移值的window。我认为您需要用一个与菜单相匹配的选择器来代替$(this)，比如$('.LeftMenuFixed')。

Answer 2

$(window).offset()不能工作，因为窗口元素是整个视图.你应该对你的导航元件做这个测试。

我认为您可以尝试将滚动事件添加到window元素中(就像您正在做的那样)，但是只需在nav元素上设置偏移量，而不是在$(this)上设置偏移量，后者只是您的窗口元素。