我目前有一個滾動錨點動畫,它還向被點擊的錨點添加了一個「活動」類。我試圖將下面的函數也納入到工作中,所以說有人點擊「錨點1」,「錨點1」會得到一個活動類,窗口將滾動到該位置。但是,在發生這種情況後,用戶手動開始向下滾動頁面,我希望刪除活動類。我現在遇到的問題是,當發生點擊錨點的滾動動畫時,下面的函數會發生。只有當窗口從點擊的錨點滾動時,我怎樣才能禁用它?等待,直到發生一個事件,然後再移動到下一個
$(window).scroll(function() {
$('a[href^=#]').removeClass('active');
});
這是我正在使用的滾動錨腳本。
/*******
*** Anchor Slider by Cedric Dugas ***
*** Http://www.position-absolute.com ***
Never have an anchor jumping your content, slide it.
Don't forget to put an id to your anchor !
You can use and modify this script for any project you want, but please leave this comment as credit.
*****/
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 500
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, 'easeOutCubic', function() {
window.location.hash = elementClick
});
return false;
})
})
}
最後,我的jQuery
// Scrolling Anchors
$('[href^=#]').anchorAnimate();
// Active Class For Clicked Anchors
var anchorscroll = $('a[href^=#]')
anchorscroll.click(function(){
var anchorlocation = $(this).attr("href");
anchorscroll.removeClass('active');
$(this).addClass('active');
$('a[href='+anchorlocation+']').addClass('active');
});
這幾乎可以工作,但我有幾個問題。主要使用scrollFn,什麼是解除綁定? 使用此方法,將在點擊時添加活動類,然後在窗口滾動時將其刪除,然後在動畫完成後返回到錨點,從而形成更多閃爍的外觀。我該如何調整它,以便在動畫完成後僅添加活動類,或者在滾動動畫發生時將其保持開啓狀態? – jaasum 2010-05-30 18:05:34
@Jaasum:我在帖子中添加了解釋。 如果它不適合你,你需要給我更多的信息,因爲它在我的FF3.6 – Luc 2010-05-30 18:47:00