Question

我有这个工作，但必须有一个更优雅的解决方案。我尝试使用数组，但我无法让它工作。

这是现在的页面。

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 Waypoints插件，因此我正在尝试使其更加优雅。这是用于突出显示导航按钮的类swticher。我尝试使用以下功能，但这不起作用。

function ToggleDot(btn){

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

任何建议使这个解决方案使用更少的代码，将非常感激。

Answer 1

你可以使用jQuery的scroll()事件函数来处理滚动，你可以通过{{3}在循环的每个'.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');

});

});

请参阅此.each()上的演示。

是否有使用Waypoint的元素切换器更优雅的解决方案

1 个答案: