我是 jQuery 的初学者，我尝试为我的菜单开发一个脚本。
声明如下：
- 我有一个垂直菜单
- 我有一个子菜单，它根据用户位置移动（更改边距顶部值）到页面中（跟踪他的滚动活动）
- 这个子菜单位于链接后面页面中用户位置功能的菜单和背景变化
问题是：我尝试使用 .animate() 函数来更改子菜单的位置并在 jQuery 中创建平滑的效果，但它在我的 if 语句中不起作用。这是我的代码：
的HTML：
<div id="menu">
<div id="logo">
<h1>NAME OF THE COMPANY</h1>
</div>
<div class="sub_menu">
<div id="sub_menu_left">
<div class="selecteur_left" id="selecteur_left_presentation">
<div class="selecteur_icon">
<i class="icon-user"></i>
</div>
</div>
<div class="selecteur_right" id="selecteur_right_presentation">
</div>
</div>
<div id="sub_menu_right">
<div id="presentation_menu">
</div>
<div id="tests_menu">
</div>
<div id="entrainements_menu">
</div>
<div id="tarifs_menu">
</div>
<div id="contact_menu">
</div>
</div>
</div>
<ul>
<hr>
<li>
<a href="#presentation" id="presentation_link" class="smoothScroll">
<span>PRÉSENTATION</span>
</a>
</li>
<hr>
<li>
<a href="#tests" id="tests_link" class="smoothScroll">
<span>TESTS</span>
</a>
</li>
<hr>
<li>
<a href="#entrainements" id="entrainements_link" class="smoothScroll">
<span id="entrainement_title_menu">ENTRAÎNEMENT</span>
</a>
</li>
<hr>
<li>
<a href="#tarifs" id="tarifs_link" class="smoothScroll">
<span>TARIFS</span>
</a>
</li>
<hr>
<li>
<a href="#contact" id="contact_link" class="smoothScroll">
<span>CONTACT</span>
</a>
</li>
<hr>
</ul>
</div>
我的菜单分为 3 类：
- 徽标
- 子菜单（当我到达页面中的不同锚点时会移动）
- li 是我的链接
这是我的脚本。
JAVASCRIPT：
var scrollTotal;
var height_1 = $('#presentation').outerHeight();
var height_2 = $('#presentation').outerHeight() + $('#tests').outerHeight();
var height_3 = $('#presentation').outerHeight() + $('#tests').outerHeight() + $('#entrainements').outerHeight();
var height_4 = $('#presentation').outerHeight() + $('#tests').outerHeight() + $('#entrainements').outerHeight() + $('#tarifs').outerHeight();
var height_5 = $('#presentation').outerHeight() + $('#tests').outerHeight() + $('#entrainements').outerHeight() + $('#tarifs').outerHeight() + $('#contact').outerHeight();
$(window).scroll(function(){
scrollTotal = $(window).scrollTop();
if(scrollTotal <= height_1){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "10px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-user');
$('#presentation_menu').css({
'opacity' : '1'
});
$('#tests_menu , #entrainements_menu , #tarifs_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#34405A'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#34405A'
});
$('.selecteur_icon').css({
'background-color' : '#181d2a'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#34405A'
})
} else if(height_1 < scrollTotal && scrollTotal <= height_2){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "72px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-check');
$('#tests_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #entrainements_menu , #tarifs_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#586E9A'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#586E9A'
});
$('.selecteur_icon').css({
'background-color' : '#3a4a69'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#586E9A'
})
} else if(height_2 < scrollTotal && scrollTotal <= height_3){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "133px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-sort-by-attributes');
$('#entrainements_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #tests_menu , #tarifs_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#FDF5F1'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#FDF5F1'
});
$('.selecteur_icon').css({
'background-color' : '#949494'
});
$('#entrainement_title_menu').css({
'color' : '#949494'
});
$('#logo').css({
'border-color' : '#FDF5F1'
})
} else if(height_3 < scrollTotal && scrollTotal <= height_4){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "194px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-eur');
$('#tarifs_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #tests_menu , #entrainements_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#7C94AC'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#7C94AC'
});
$('.selecteur_icon').css({
'background-color' : '#546679'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#7C94AC'
})
} else if(scrollTotal > height_4){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "255px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-envelope ');
$('#contact_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #tests_menu , #entrainements_menu , #tarifs_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#D55C41'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#D55C41'
});
$('.selecteur_icon').css({
'background-color' : '#964735'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#D55C41'
});
}
});
});
我想跟踪我的不同类别的高度，并根据页面中的当前高度移动子菜单（具有 margin-top 属性）。除了 animate 功能（它可以工作但它不是动画）之外，一切都可以工作。如果我更改时间值（10ms 到 100 或 1000），它永远不会移动。
我知道我的脚本可以简化，但首先我想看看它是否可以工作。有人有解决方案吗？
问候。