如何通過jQuery的滾動上

我創造了這個筆在CodePen.io，頁面滾動順利不同部分上點擊任何項目的NAV（導航）如何通過jQuery的滾動上

這裏的頁面添加一些CSS類是jQuery代碼。

// Smooth Scroll on clicking navigation items 
$('nav a').click(function() { 
    var $href = $(this).attr('href'); 
    $('body').stop().animate({scrollTop: $($href).offset().top}, 1000); 

    // add class "active" to nav items on click 
    $('nav a').removeClass('active'); 
    $(this).addClass('active'); 
    return false; 
});

我已經添加了類「活動」當有人點擊任何導航中的鏈接，而是如何不通過點擊鏈接上添加類主動當有人使用滾動條滾動到該節？

看那筆here

您的建議將理解，預先感謝您！

來源

2014-09-24 Bangash

兄弟@avall我已經.scroll（）讀取，如果你看一下筆，我已經用它來實現視差背景效果，但不知道如何實現我想要的，如上所述。 – Bangash 2014-09-24 21:17:33

這已經回答了[這裏]（http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling） – Jose 2014-09-24 21:18:20

您可以在此fiddle

仰望你必須使用事件滾動

$(document).on("scroll", function(){ ... });

，然後計算頂部位置差。

來源

2014-09-24 21:17:30

這個解決方案的工作，我實際上修改了一下，因爲它閃爍當我使用小提琴的代碼形式。 – Bangash 2014-09-24 21:44:11

添加到您的$(window).scroll()功能

$(".active").toggleClass("active"); 
    if ($(window).scrollTop() < $("#portion2").offset().top-100){ //maybe you want to tweak this value 
    $($("nav a")[0]).toggleClass("active"); 
    } 
    else if ($(window).scrollTop() < $("#portion3").offset().top-100){ 
    $($("nav a")[1]).toggleClass("active"); 
    } 
    else if ($(window).scrollTop() < $("#portion4").offset().top-100){ 
    $($("nav a")[2]).toggleClass("active"); 
    } 
    else{  
    $($("nav a")[3]).toggleClass("active");  
    } 
})

，然後從$('nav a').click()

刪除

$('nav a').removeClass('active'); 
$(this).addClass('active');

這也增加了一個非常酷的通過所有部分改變，而在4點擊觀看時1.

看看這裏： http://codepen.io/anon/pen/dFkEG

來源

2014-09-24 21:22:03

讓我試試這個，其實我修改它，它的工作，但可能是你的解決方案更好。 – Bangash 2014-09-24 21:42:39

通過使用jQuery將css添加到對應於滾動位置的元素非常簡單。可以使用相同的概念來使用滾動值將元素添加到元素。下面是一個示例代碼：

$(window).scroll(function(){ var wScroll = $(this).scrollTop(); //This stores your scroll value from top if (wScroll > $('#portion1').offset().top){ $('#portion1').addClass('active'); } });

上面的代碼將類活性添加到具有類portion1當它是在瀏覽器窗口的頂部元件。如果你想讓它儘快進入瀏覽器窗口中添加類活躍，然後使用此代碼：在jQuery.com

if (wScroll > $('#portion1').offset().top - ($(window).height())){ $('#portion1').addClass('active'); }

來源

2015-08-12 17:55:13

如何通過jQuery的滾動上

回答

相關問題