Question

I have a problem here, i want the left hand side menu to slide down when it hits a certain point on the page and always stay at the top trying to do this with jQuery. Position fixed in css works but it doesnt stay at the top of the window when sliding down the page, leaves a big white gap. jQuery newbie here…

I get this error;

$(this).offset() is null

Full code here

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

Cannot read proprty top of null << error message in google chrome inspect element

do i need to set a value for top then? confused here.

UPDATED:

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

Brings back no errors but doesnt slide down

HTML is here

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

I found a much simpler solution to my problem, why couldnt this solution come out before i posted on here grrrr!
For those that have similar problems this is what i used;

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

Works like a charm!

Answer 1

In your code $(this) refers to window, which have no offset value.
I think you need to replace $(this) by a selector that matches your menu, like $('.LeftMenuFixed').