固定页眉和自动滚动到 Div 的

Question

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

所以基本上在 HTML 中，我为每个部分（sectio1、section2、section3 等）分配了 ID，并且我还在顶部导航 href 中分配了这些部分，例如 <a href="#about">About us</a>。因此，当您从顶部导航单击 About us 时，它会将您带到 ID 为 #about.的 Div

但是，滚动位正在工作，因为我的标题是固定的 - 当它滚动到该部分时，该部分的顶部似乎被裁剪，因为标题覆盖它。单击此处进行实时预览：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

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

---

活动链接

您可以通过触发滚动事件然后检查scrollTop 是否在高度之间，x and y 用于 Home 或 y and z 用于 About 等。

好的，你可以使用下面的代码...

$(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;
            }
        }
    });   
    });