$(this).offset() is null

faseh · Jul 30, 2012

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; \[code\]$(this).offset() is null\[/code\]Full code here\[code\]$(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'); } }); }});});\[/code\]CSS\[code\]#dvContentAlpha{width: 145px;float: left;margin-right: 35px;position:fixed;}.LeftMenuFixed {float: left;font-weight: bold;position: fixed;top: 10px;width: 145px;}\[/code\]Cannot read proprty top of null << error message in google chrome inspect elementdo i need to set a value for top then? confused here.UPDATED:\[code\]$(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'); } }); } });});});\[/code\]Brings back no errors but doesnt slide down HTML is here\[code\]<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="http://stackoverflow.com/Assets/Images/button-contact.jpg" alt="Contact Us" /></a> <div class="weatherwidget"> <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> </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;">  </div> </div> </div></div></div><div id="dvFooter"></div></div>\[/code\]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;\[code\]<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>\[/code\]Works like a charm!

$(this).offset() is null

faseh

New Member