$(this).offset()为null

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 chrome inspect元素中读取proprty top of null <<错误消息

我需要为顶部设置一个值吗？困惑在这里.

更新:

$(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>

我找到了一个更简单的解决方案来解决我的问题,为什么这个解决方案在我发布在这里之前就没出来了grrrr!对于那些有类似问题的人来说,这就是我用过的;

<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').