我在这里遇到问题,我希望左侧菜单碰到页面上的某个点时向下滑动菜单,并始终停留在顶部,以使用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检查元素中的null <
那我需要为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>


奇迹般有效!

最佳答案

在您的代码中,$(this)指的是window,它们没有偏移值。
我认为您需要用匹配菜单的选择器(例如$(this))替换$('.LeftMenuFixed')

10-05 20:53
查看更多