Question

我正在使用以下脚本滚动到页面中的某个部分，当它点击标题顶部导航菜单中的链接时

所以基本上在HTML中我已经为每个部分分配了ID（sectio1，section2，section3等），并且我还在顶部导航href中分配了这些部分，例如<a href="#about">About us</a>。因此，当您点击顶部导航栏中的“关于我们”时，系统会将您转到ID为#about.

的Div

滚动位正在工作，但是因为我的Header是固定的 - 当它滚动到该部分时，该部分的顶部位显示为裁剪，因为标题覆盖了它。点击这里进行实时预览：www.loaistudio.com我该怎么办？我还能做些什么来添加到下面的JavaScript来实现它，当你滚动到一个部分时，它实际上从导航中获得了一个Active类的链接？

$(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) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 700);
                return false;
            }
        }
    });   
    });

Answer 1

滚动

简单的解决方案是将scrollTop更改为菜单栏高度的因素...

类似的东西：

scrollTop: target.offset().top - 186

如果菜单不是固定高度，您也可以动态获得高度。

Active Link

您可以通过滚动事件触发器然后检查scrollTop是否位于主页x and y之间或y and z之间是否为约等等来实现此目的。

好的，您可以使用以下代码......

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

    var welcomeOffset     = $('#Welcome').offset().top;
    var aboutOffset       = $('#About').offset().top;
    var portfolioOffset   = $('#Portfolio').offset().top;
    var endorsementOffset = $('#Endorsements').offset().top;
    var contactOffset     = $('#Contact').offset().top;

    var foreColor = "777";
    var backColor = "FAFAFA";

    $('#mainMenu li a').css({background:"#FFFFFF", color: "#F58221"})
    if(scrollHeight >= welcomeOffset && scrollHeight < aboutOffset){
        $('#mainMenu :nth-child(1) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= aboutOffset && scrollHeight < portfolioOffset){
        $('#mainMenu :nth-child(2) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= portfolioOffset && scrollHeight < endorsementOffset){
        $('#mainMenu :nth-child(4) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= endorsementOffset && scrollHeight < contactOffset){
        $('#mainMenu :nth-child(3) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= contactOffset){
        $('#mainMenu :nth-child(5) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
})

以上代码可以放在<script>...</script>标记的任何位置，您可以放置其他jquery，您也可以在您已经显示的代码之前（或之后）放置它...即就在上面（或下面）

$(document).ready(function () {.....})

如果您想在添加到网站之前对其进行测试，只需将其放入Firefox scratchpad （打开页面并在Firefox中按SHIFT+F4）然后复制/粘贴上面的代码并点击CTRL+R然后向上和向下滚动以查看它是否有效。

澄清代码应如何一起做

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

    var welcomeOffset     = $('#Welcome').offset().top;
    var aboutOffset       = $('#About').offset().top;
    var portfolioOffset   = $('#Portfolio').offset().top;
    var endorsementOffset = $('#Endorsements').offset().top;
    var contactOffset     = $('#Contact').offset().top;

    var foreColor = "777";
    var backColor = "FAFAFA";

    $('#mainMenu li a').css({background:"#FFFFFF", color: "#F58221"})
    if(scrollHeight >= welcomeOffset && scrollHeight < aboutOffset){
        $('#mainMenu :nth-child(1) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= aboutOffset && scrollHeight < portfolioOffset){
        $('#mainMenu :nth-child(2) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= portfolioOffset && scrollHeight < endorsementOffset){
        $('#mainMenu :nth-child(4) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= endorsementOffset && scrollHeight < contactOffset){
        $('#mainMenu :nth-child(3) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
    if(scrollHeight >= contactOffset){
        $('#mainMenu :nth-child(5) a').css({background:"#"+backColor, color:"#"+foreColor})
    }
})


$(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) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 700);
                return false;
            }
        }
    });   
    });

固定标题和自动滚动到Div

1 个答案:

滚动

Active Link

澄清代码应如何一起做