Question

我正在尝试创建一个只有一个页面但其中包含不同部分的网站，您可以使用菜单进行导航，它会将您滚动到所选部分。

以下是我使用您将在下面看到的技术创建的网站的实时预览： http://spacehopperdesign.co.uk

请查看此小提琴，了解我正在使用的HTML和JavaScript，忽略CSS，因为它不执行任何操作：http://jsfiddle.net/J2kjA

我的问题是：我希望按钮在显示其部分时获得类.active。我知道我设法让它在实时预览中注意到它。但正如你将在Fiddle中看到的那样，我使用的JS有点复杂，我真的很困惑，特别是在处理一个包含很多部分的大项目时。

无论如何使用更简单的方法获得相同的结果？我不喜欢使用插件。任何帮助或建议将不胜感激。

这也是JS：

$(document).ready(function() {

    //Prevent clicking on .active links
    'use strict'; $('.active').click(function(a) {
        a.preventDefault();
    });

    //Menu Scrolling To Sections//
    $(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

        if (target.length) { 
            var topPadding = 50; 
        if($(window).width() > 1030) 
            topPadding = 80; 
        $('html,body').animate({ 
            scrollTop: target.offset().top - topPadding }, 700);
        return false;
        }}});
    });


    $(window).scroll(function(){ 
    var scrollHeight = $(window).scrollTop() + 200; 

    var index = $('#Index').offset().top; 
    var sectionA = $('#SectionA').offset().top; 
    var sectionB = $('#SectionB').offset().top; 
    var sectionC = $('#SectionC').offset().top; 

        $('#mainMenu li a').removeClass('active'); 

        if(scrollHeight >= index && scrollHeight < sectionA) 
        $('#index').addClass('active'); 

        if(scrollHeight >= sectionA && scrollHeight < sectionB) 
        $('#sectionA').addClass('active'); 

        if(scrollHeight >= sectionB && scrollHeight < contact) 
        $('#sectionB').addClass('active'); 

        if(scrollHeight >= sectionC) 
        $('#sectionC').addClass('active'); 
    });


});

和HTML：

        <header id="headerWrapper">
            <div id="headerContent">
                <nav>
                    <ul id="mainMenu"><!--Main Menu-->
                        <li><a class="active" href="#Index" id="index">Welcome</a></li>
                        <li><a href="#SectionA" id="sectionA">SectionA</a></li>
                        <li><a href="#SectionB" id="sectionB">SectionB</a></li>
                        <li><a href="#SectionC" id="sectionC">Contact</a></li>
                    </ul>
                </nav>

            </div>
        </header>

        <div id="page"><!--Main Container-->

            <div id="Index" class="wrapper">
                <div class="content">

                </div>
            </div>  

            <div id="SectionA" class="wrapper">
                <div class="content">

                </div>
            </div> 

            <div id="SectionB" class="wrapper">
                <div class="content">

                </div>
            </div> 

            <div id="SectionC" class="wrapper">
                <div class="content">

                </div>
            </div>        
</div>

Answer 1

您是否尝试过使用JQuery向按钮添加类？ 测试和工作 http://jsfiddle.net/J2kjA/7/

首先向每个按钮添加另一个类和数据：

<li><a class="btn active" data-btn="index" href="#Index" id="index">Welcome</a></li>
<li><a class="btn" data-btn="sectionA" href="#SectionA" id="sectionA">SectionA</a></li>
<li><a class="btn" data-btn="sectionB" href="#SectionB" id="sectionB">SectionB</a></li>
<li><a class="btn" data-btn="sectionC" href="#SectionC" id="sectionC">Contact</a></li>

对于JavaScript：

$(document).ready(function() {

//Prevent clicking on .active links
'use strict'; $('.active').click(function(a) {
    a.preventDefault();
});

//Menu Scrolling To Sections//
$(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

            if (target.length) { 
                var topPadding = 50; 
                if($(window).width() > 1030) 
                topPadding = 80; 
                $('html,body').animate({ 
                    scrollTop: target.offset().top - topPadding }, 700);
                    return false;
                }
            }
        });
    });


$(window).scroll(function(){ 
    var scrollHeight = $(window).scrollTop() + 200; 
    var index = $('#Index').offset().top; 
    var sectionA = $('#SectionA').offset().top; 
    var sectionB = $('#SectionB').offset().top; 
    var sectionC = $('#SectionC').offset().top; 

    });
}); 


$(function(){
    $('.btn').on('click', function(){
        var btn = $(this).data("btn");
        $('#index').removeClass("active");
        $('#sectionA').removeClass("active");
        $('#sectionB').removeClass("active");
        $('#sectionC').removeClass("active");
        $('#'+btn).addClass ("active");
    });
});

http://api.jquery.com/removeClass/

Answer 2

我找到了这个功能：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

这会检查滚动后元素是否可见。您可以在滚动页面时调用它，并检查每个元素所需的内容。

$(window).scroll(function(){ 
    if(isScrolledIntoView($('#SectionA'))){
        $('#sectionA').addClass('active');
    }
}

Answer 3

也许这个：

$(document).ready(function() {

  $('#mainMenu a').click(function() {
    $('#mainMenu a').removeClass('active');
       $(this).addClass('active');
   });

   if(scrollHeight >= index && scrollHeight < sectionA) 
    {$('#index').trigger('click');} //etc

  });

有没有更好的方法来实现相同的结果？一页网站

3 个答案: