我在这里遇到问题,我希望左侧菜单碰到页面上的某个点时向下滑动菜单,并始终停留在顶部,以使用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;">
</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')
。