2017-09-05 10 views
1

WordPressのdiv idに基づいて、スティッキーメニューとハイライトメニューに取り組んでいます。私はコードをうまく完成しましたが、問題がありました。 サイド・スティッキー・メニュー・タイトルのメニュー項目をクリックすると、ヘッダー・タイトルに戻ってスティッキー・ヘッダーが表示されます。 enter image description hereJqueryを使ってdivに余分なスペースを追加するには?

私はこのような結果が欲しいです。 enter image description here どうすればこの問題を解決できますか?

私の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"); 
      } 
     } 
    }); 
}); 

答えて

1

あなたがアンカーのセクションにジャンプするとき、見出しの高さを相殺する必要があります。

jQuery scrollToプラグインを使用していますか?あなたが何かを行うことができる場合:scrollToため

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

オプションをここで見つける:それは私の感謝のために働いてhttp://demos.flesler.com/jquery/scrollTo/

+0

。あなたは理解しにくいこのコードに関するいくつかの説明を与えることができますか? – muraliniceguy97

+0

scrollToプラグインのドキュメント、特にUsage and Settingsを読んでください。このプラグインは '$(element).scrollTo(target [、duration] [、settings]);'のように使うことができます。設定はオブジェクトで、 'offset'プロパティとオブジェクトを追加して、ターゲット要素から – itodd

関連する問題