0
我是jQuery中的一個begginer，我嘗試爲我的菜單開發一個腳本。
聲明如下：
- 我有一個垂直菜單
- 我有一個移動（改變邊距值），在用戶位置的功能，進入頁面（跟蹤他的滾動活動）
子菜單 - 這個子菜單是在菜單中的鏈接和在頁面中的用戶位置的功能的背景變化
。ifimate語句中的動畫
問題是：我試圖使用.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類：
- 標誌
- 子菜單（至極moove當我在不同的錨在到達頁）
- 這是我的鏈接
這裏是我的腳本李。
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'
});
}
});
});
我想跟蹤我的不同類別的高度，並在頁面的當前高度的功能移到子菜單（與邊距禮）。除了動畫功能以外的所有工作（它可以工作，但不是動畫）。如果我改變時間的值（10ms到100或1000），它永遠不會移動。
我知道我的腳本可以symplify但首先我想看看它是否可以工作。 任何人都有解決方案嗎？
此致敬禮。
您是否嘗試將其更改爲''「margin-top」'，然後不要在末尾加逗號。 – James
感謝您的回覆，但不幸的是，它既不工作也不工作... – user2553816
也許嘗試讓它們相對或絕對位置並改變'top'屬性。創建一個jsfiddle並嘗試在小範圍內複製它。 – James