我正在使用这两个脚本,一个用于在单击 anchor 标记时更改类,另一个用于在向下滚动页面时更改类。当我单击 anchor 标记时,类会发生变化,但由于滚动功能,它会恢复原状,我也在为我的滚动页面设置动画。我怎样才能避免两者之间的冲突。
根据 anchor 改变类。
<script>
$(document).ready(function () {
$('.sidebar-nav li a').click(function(e) {
$('.sidebar-nav li').removeClass('active_nav');
var $parent = $(this).parent();
if (!$parent.hasClass('active_nav')) {
$parent.addClass('active_nav');
}
e.preventDefault();});});
</script>
根据滚动更改类
<script>
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('.page').each(function(i) {
if ($(this).position().top <= windscroll) {
$('.sidebar-nav li').removeClass('active_nav');
$('.sidebar-nav li').eq(i).addClass('active_nav');
}
});});
</script>
滚动到页面
<script>
$('.scroll a').click(function(e) {
var goTo = $(this).attr('href'); // selects element that was clicked
$("html,body").animate({scrollTop:$(goTo).offset().top}, 1000);
e.preventDefault();
});
</script>
最佳答案
如果 $(this).position().top + $(this).height() > windscroll
,您可能应该添加一个条件。
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('.page').each(function(i) {
var posTop = $(this).position().top,
h = $(this).height();
if (posTop <= windscroll && posTop + h > windscroll ) {
$('.sidebar-nav li').removeClass('active_nav');
$('.sidebar-nav li').eq(i).addClass('active_nav');
}
});
});
关于javascript - 导航滚动和点击 anchor 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20915252/