是否有一個更優雅的解決方案使用Waypoints

元素切換器我已經得到了這個工作，但必須有一個更優雅的解決方案。我嘗試使用數組，但我無法得到這個工作。是否有一個更優雅的解決方案使用Waypoints

這是現在的頁面。

http://www.radicalcause.com/

這裏是我的正文文本。

<body> 

<div id="pageOurWork" class="page"> 
our work 
</div><!-- end pageOurWork --> 

<div id="pageHome" class="page"> 
<div id="logoFive"><img src="/img/rad_500.png" /></div> 
</div><!-- end pageHome --> 

<div id="pageAboutUs" class="page"> 
about us 
</div><!-- end pageAboutUs --> 

<div id="pageContactUs" class="page"> 
contact us 
</div><!-- end pageContactUs --> 

<div id="pageYourStory" class="page"> 
tell us your story 
</div><!-- end pageYourStory --> 

<div id="dotOne"><img src="/img/dot1.png" /><p>1</p></div> 
<div id="logoOne"><img src="/img/rad_100.png" /></div> 

<div id="navBlock"> 
<div id="buttonOurWork" class="blueDot"></div> 
<div id="buttonHome" class="blueDot"></div> 
<div id="buttonAboutUs" class="blueDot"></div> 
<div id="buttonContactUs" class="blueDot"></div> 
<div id="buttonYourStory" class="blueDot"></div> 
</div><!-- end navBlock --> 
</body>

這裏是我的jQuery

$(document).ready(function(){ 

// Set screen size 
var screenWidth = $(window).width(); 
var screenHeight = $(window).height(); 

// set initial sizes & placements 
$(".page").width(screenWidth).height(screenHeight); 
SetLogoFivePosition(); 
SetDotOnePosition(); 
SetLogoOnePosition(); 
SetNavPosition(); 

//when the page opens, go to the pageHome Div 
$(function() { 
    $(document).scrollTop($("#pageHome").offset().top); 
}); 

// ************************************************************* 
// RESIZE Do the following when the window resizes 

$(window).resize(function() { 
    screenWidth = $(window).width(); 
    screenHeight = $(window).height(); 

    $(".page").width(screenWidth).height(screenHeight); 

    SetLogoFivePosition(); 
    SetDotOnePosition(); 
    SetNavPosition(); 

}); // END RESIZE 
// ************************************************************* 

// ************************************************************* 
// BUTTONS 

// Oh small logo, take us home baby, take us home 
$("#logoOne").click(function() { 
    scrollToPosition("#pageHome"); 
}); 
// small logo sends us home 
$("#logoOne").click(function() { 
    scrollToPosition("#pageHome"); 
}); 
// go to our work 
$("#buttonOurWork").click(function() { 
    scrollToPosition("#pageOurWork"); 
}); 
// go home 
$("#buttonHome").click(function() { 
    scrollToPosition("#pageHome"); 
}); 
// pageAboutUs 
$("#buttonAboutUs").click(function() { 
    scrollToPosition("#pageAboutUs"); 
}); 
// pageContactUs 
$("#buttonContactUs").click(function() { 
    scrollToPosition("#pageContactUs"); 
}); 
// pageYourStory 
$("#buttonYourStory").click(function() { 
    scrollToPosition("#pageYourStory"); 
}); 

// ************************************************************* 
// waypionts 
// ************************************************************* 

$('#pageOurWork').waypoint(function() { 
    $("#dotOne p").text("our work"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonOurWork").removeClass().addClass("orangeDot"); 
}, {offset: -10}); 

$('#pageHome').waypoint(function() { 
    $("#dotOne p").text("home"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonHome").removeClass().addClass("orangeDot"); 
}, {offset: 5}); 
$('#pageHome').waypoint(function() { 
    $("#dotOne p").text("home"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonHome").removeClass().addClass("orangeDot"); 
}, {offset: -5}); 

$('#pageAboutUs').waypoint(function() { 
    $("#dotOne p").text("about us"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonAboutUs").removeClass().addClass("orangeDot"); 
}, {offset: 5}); 
$('#pageAboutUs').waypoint(function() { 
    $("#dotOne p").text("about us"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonAboutUs").removeClass().addClass("orangeDot"); 
}, {offset: -5}); 

$('#pageContactUs').waypoint(function() { 
    $("#dotOne p").text("contact us"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonContactUs").removeClass().addClass("orangeDot"); 
}, {offset: 5}); 
$('#pageContactUs').waypoint(function() { 
    $("#dotOne p").text("contact us"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonContactUs").removeClass().addClass("orangeDot"); 
}, {offset: -5}); 

$('#pageYourStory').waypoint(function() { 
    $("#dotOne p").text("tell us your story"); 
    $(".orangeDot").removeClass().addClass("blueDot"); 
    $("#buttonYourStory").removeClass().addClass("orangeDot"); 
}, {offset: 5}); 



// ************************************************************* 
// FUNCTIONS 
// ************************************************************* 

function SetLogoFivePosition() { 
    $("#logoFive").css("margin-top", ((screenHeight/2)-250)); 
    $("#logoFive").css("margin-left", ((screenWidth/2)-250)); 
} 
function SetDotOnePosition() { 
    $("#dotOne").css("top", ((screenHeight/2)-21)); 
    $("#dotOne").css("left", ((screenWidth/2)-21)); 
} 
function SetLogoOnePosition() { 
    $("#logoOne").css("top", 20); 
    $("#logoOne").css("left", 20); 
} 
function SetNavPosition() { 
    $("#navBlock").css("top", ((screenHeight/2)-105)); 
    $("#navBlock").css("left", 20); 
} 
function scrollToPosition(targetElement){ 
    var targetOffset = $(targetElement).offset().top; 
    $('html, body').animate({scrollTop:targetOffset}, 'slow'); 
} 


});

我使用jQuery的航點插件因此它在該塊，我試圖讓更多的優雅。這是突出顯示導航按鈕的課程。我嘗試使用以下功能，但那不起作用。

function ToggleDot(btn){ 

    $('#navBlock').children().each(function(){ 
       $(this).hasClass("orangeDot").removeClass("orangeDot").addClass("blueDot"); 
    }); 
    $(btn).removeClass().addClass("orangeDot"); 
}

任何意見，使這個解決方案與更少的代碼工作，將不勝感激。

來源

2014-01-24 JD-

您可以使用jQuery的scroll()事件函數處理滾動，並且您可以通過.each()函數在循環中的每個'page'上使用條件（檢查頁面是否滾動到）來裁剪代碼。

$(document).ready(function(){ 

/* window scrolling */ 
$(window).scroll(function(){ 
    var winTop = $(this).scrollTop(); 

    $('.page').each(function(index){ 
     var pageTop = $(this).offset().top; 
     var pageH = $(this).height(); 
     if(winTop >= pageTop && winTop < pageTop + pageH){ 
      /*the user scrolled to this page 
       add a class 'orangeDot' to the corresponding button 
       with the same index to this page */ 
      $('#navBlock div').eq(index).addClass('orangeDot'); 
     }else{ 
      /*else if this page is not active in the viewport 
       remove the class 'orangeDot' */ 
      $('#navBlock div').eq(index).removeClass('orangeDot'); 
     } 
    }); 
}).trigger('scroll'); 

/* button clicking */ 
$('#navBlock div').click(function(){ 
    var index = $(this).index(); 
    var target = $('.page').eq(index).offset().top; 
    /* target the page with same index to this button 
     scroll smoothly to the page using animate */ 
    $('html, body').animate({scrollTop:target},'slow'); 

}); 

});

請參閱此演示jsfiddle。

來源

2014-01-25 01:31:47

謝謝。這大大簡化了它！ –

是否有一個更優雅的解決方案使用Waypoints

回答

相關問題