Question

我正在处理粘性菜单并根据WordPress中的div id突出显示菜单。我已经完成了代码，但我遇到了问题。当我点击侧面粘性菜单标题中的菜单项回到标题标题不可见时，我有一个粘性标题。

我想要这样的结果。我怎么解决这个问题？

我的Jquery代码

jQuery(function($) {

    /**
     * This part causes smooth scrolling using scrollto.js
     * We target all a tags inside the nav, and apply the scrollto.js to it.
     */
    $("#nav a").click(function(evn){
        evn.preventDefault();
        $('html,body').scrollTo(this.hash, this.hash); 
    });

    var aChildren = jQuery("#nav li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = jQuery(aChild).attr('href');
      console.log(ahref);
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

 $(window).scroll(function(){
        var windowPos = $(window).scrollTop()+70; // get the offset of the window from the top of page
console.log('Window Position:'+windowPos);
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();


        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
          //console.log(theID);
            var divPos = $(theID).offset().top-150; // get the offset of the div from the top of page
          console.log('Div Position:'+divPos);
            var divHeight = $(theID).height(); // get the height of the div in question          
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                $("a[href='" + theID + "']").addClass("nav-active");
            } else {
                $("a[href='" + theID + "']").removeClass("nav-active");
            }
        }

        if(windowPos + windowHeight == docHeight) {
            if (!$("#nav li:last-child a").hasClass("nav-active")) {
                var navActiveCurrent = $(".nav-active").attr("href");
                $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
                $("#nav li:last-child a").addClass("nav-active");
            }
        }
    });
});

Answer 1

跳转到锚定区域时，您需要偏移标题的高度。

您使用的是jQuery scrollTo插件吗？如果你可以这样做：

$("#nav a").click(function(evn){
    evn.preventDefault();
    $('html,body').scrollTo(this.hash, 800, {offset: {top:-80, left:0} }); 
});

在此处找到scrollTo的选项：http://demos.flesler.com/jquery/scrollTo/

如何使用Jquery为div添加额外的空间？

1 个答案: