1

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

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

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

1 回答 1

0

滚动

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

就像是：

scrollTop: target.offset().top - 186

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

活动链接

您可以通过触发滚动事件然后检查是否在Home 或About 等的scrollTop高度之间来做到这一点。x and yy 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暂存器（打开您的页面并SHIFT+F4在 Firefox 中按下）然后复制/粘贴上面的代码并点击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;
            }
        }
    });   
    });
于 2013-09-24T17:33:14.107 回答