[英]Navigation Scrolling and Clicking anchor tag
我正在使用這兩個腳本,一個用於單擊錨標記時更改類,另一個用於向下滾動頁面時更改類。 當我單擊錨標記時,該類會更改,但是由於具有滾動功能,它會向后還原,因此我也向動畫頁面添加了動畫。 如何避免兩者之間的沖突。
根據錨點更改類。
<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');
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.