[英]jQuery – Adding a class at/after a specific point in scroll, with variable-length content above
jQuery和JavaScript基本上是全新的。 我在http://jsbin.com/alibi3/2/上模拟了我的问题的示例-以下说明。
我有一个div,在用户滚动到页面上的某个点之后,被分配了“固定”类别,因此它跟随用户进入页面。 它本身可以正常工作。
问题是,可以将div上方的内容切换为显示/隐藏-并且在显示该内容时,固定类仍在被隐藏的那一刻仍在应用,因此看起来像是“跳转”。
我如何告诉我的固定类添加函数显示/隐藏了上面的div,并因此调整了添加“固定”类的位置?
谢谢。
<div id="drawer">
<a href="#">Click here to toggle drawer</a>
<p id="drawercontents">Here is the stuff in the drawer; hidden by default.</p>
</div>
<div id="article">
blah, blah...
</div>
<div id="nav">
This should follow down the page once we scroll past the start of the article,
and 'stick' back in place when we are back at the top.
</div>
#article {
width: 400px;
float: left;
margin-right: 20px;
padding: 20px;
background: #eee;
}
#nav {
width: 200px;
float: left;
background: #ff0;
padding: 20px;
}
#drawer {
width: 660px;
padding: 20px;
color:#fff;
background: #000;
margin-bottom: 10px;
}
.fixed { position: fixed; left: 460px; top: 0px; }
$(document).ready(function() {
$('#drawercontents').hide();
$('#drawer a').click(function(e){
e.preventDefault();
$('#drawercontents').toggle('fast');
});
var top =$('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
$(window).scroll(function () {
// what is the y position of the scroll?
var y = $(window).scrollTop();
// whether that's below the start of article?
if (y >= top) {
// if so, add the fixed class
$('#nav').addClass('fixed');
} else {
// otherwise, remove it
$('#nav').removeClass('fixed');
}
});
});
每当您执行某些操作来修改“固定” div的基本位置时,都需要重新快照其基本位置。
例如,在演示代码中,重新测量toggle()
调用中的顶部。
请参阅下面的修改后的代码,或在http://jsbin.com/alibi3/8上查看实际运行的代码。
var GblTop;
function GetVertOffset (srchStr)
{
GblTop = $(srchStr).offset().top - parseFloat($(srchStr).css('marginTop').replace(/auto/, 0));
}
$(document).ready(function ()
{
$('#drawercontents').hide();
$('#drawer a').click (function (e)
{
e.preventDefault();
$('#drawercontents').toggle('fast', function() {GetVertOffset ('#nav'); } );
});
GetVertOffset ('#nav'); //-- Sets GblTop
$(window).scroll (function ()
{
// what is the y position of the scroll?
var y = $(window).scrollTop();
// whether that's below the start of article?
if (y >= GblTop)
{
// if so, add the fixed class
$('#nav').addClass('fixed');
}
else
{
// otherwise, remove it
$('#nav').removeClass('fixed');
}
});
});
我自己想通了! 万一其他人遇到相同的问题并遇到此问题,这是我的修改后的代码和对我所做工作的最佳解释(尽管是业余的):
JS:
$(document).ready(function() {
$('#drawercontents').hide();
var top =$('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
$('#drawer a').click(function(e){
e.preventDefault();
$('#drawercontents').toggle('fast', function() {
top =$('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
});
});
$(window).scroll(function () {
// what is the y position of the scroll?
var y = $(window).scrollTop();
// whether that's below the start of article?
if (y >= top) {
// if so, add the fixed class
$('#nav').addClass('fixed');
} else {
// otherwise, remove it
$('#nav').removeClass('fixed');
}
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body { margin: 0; padding: 0; }
#article { width: 400px; height: 1000px; float: left; margin-right: 20px; padding: 20px; background: #eee; }
#nav { width: 200px; float: left; background: #ff0; padding: 20px; }
#drawer { width: 660px; padding: 20px; color:#fff; background: #000; margin-bottom: 10px; }
.fixed { position: fixed; left: 460px; top: 0px; }
</style>
</head>
<body>
<div id="drawer">
<a href="#">Click here to toggle drawer</a>
<p id="drawercontents">Here is the stuff in the drawer. It is hidden by default. When it is shown there is a problem with the nav jumping to the top of the page when we scroll.</p>
</div>
<div id="article">
<h2>This is a long article!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque sed egestas id, iaculis ut erat. Praesent ut neque vel dolor lacinia eleifend at sit amet sem, etc etc</p>
<p>Div height has been set to 1000px to force scrolling without adding too much filler text</p>
</div> <!-- end article -->
<div id="nav">
This should follow down the page once we scroll past the start of the article, and 'stick' back in place when we are back at the top.
</div>
</body>
</html>
JS Bin上的工作示例– http://jsbin.com/alibi3/9
top
设置为全局变量,因此可以在函数之间使用。 首先,它是在文档加载时设置的,然后每当运行切换抽屉功能$('#drawer a').click(function(e)
时,就重新定义它。
因此,现在,每当$(window).scroll
运行时,它就具有可以使用的top
的正确值,并且其行为就像我想要的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.