Jes*_*ist 1 html javascript css jquery
我已经尝试了互联网上我能找到的每一件事,因为我是js中的一个完整的菜鸟我正在尝试学习一些更复杂的css我不知道为什么这个滚动然后修复代码不起作用并且不要'我知道如何让它发挥作用.基本上我有一个标题包装,其中包括373px高度的header_pic和高度为50像素的header_nav.我只想滚动到header_nav的顶部,然后将其设置为固定位置,但我使用的每一个单独的工作由于某种原因而且我确实在我的html页面中包含了google的jQuery CDN头部区域,然后我包含了我的外部脚本.
以下是我在jsfiddle中的网页示例:https://jsfiddle.net/pyr2h0c5/
var elementPosition = $('#header_nav').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#header_nav').css('position', 'fixed').css('top', '0');
} else {
$('#header_nav').css('position', 'static');
}
});
谢谢你的好评:D
据我所知,您在代码中链接了jQuery,然后包含了您的脚本.您将脚本放在<head>使脚本运行时未定义所选元素的脚本中,因为它们在脚本之后呈现(如#header_nav示例所示).
滚动时可能抛出的错误:
未捕获的TypeError:无法读取未定义的属性"top"
解决方案:将
jQuery保留在原来的位置,但将脚本移出<head>并在结束</body>标记之前放置.一切都应该是桃子的:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- Your HTML -->
<script type="text/javascript">
var elementPosition = $('#header_nav').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#header_nav').css('position', 'fixed').css('top', '0');
} else {
$('#header_nav').css('position', 'static');
}
});
</script>
</body>
</html>