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

无法读取top的顶部null＆lt;＆lt; Google Chrome检查元素中的错误消息

我需要为top设置一个值吗？困惑在这里。

更新：

$(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')。

Answer 2

$(window).offset()无法正常工作，因为窗口元素是您的整个视口......您可能应该对您的导航元素进行此测试。

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

$（this）.offset（）为null

2 个答案: