スティッキーサブメニューの開始点

Question

新しいビルドには3つのメニューがあります。

メニュー1 position: relative;

メニュー3（ページ下半分）とposition: fixed; min-height: 30px;

メニュー2つのスクロールを使用してスティッキーメニューposition: absolute;で始まり、その後としてposition: fixed;

メニュー1にユーザーがスクロール変更3つはスクロールにスタックする必要があり、現在は重複しています。

サイトはWPで構築されており、メニュー3の開始位置を制御するためにこのJavascriptを使いこなしていますが、適用されていません。テーマ機能にコードが追加されました。上記のコード

add_action('wp_footer', 'enfold_customization_custom_scripts'); 
function enfold_customization_custom_scripts() { 
?> 
<script type = "text/javascript"> 
jQuery(document).ready(function(){ 
var menu = document.querySelector('#sub_menu1') 
var menuPosition = menu.getBoundingClientRect().top; 
window.addEventListener('scroll', function() { 
    if (window.pageYOffset >= menuPosition) { 
     menu.style.position = 'fixed'; 
     menu.style.top = '40px'; 
    } else { 
     menu.style.position = 'static'; 
     menu.style.top = ''; 
    } 
}); 
</script> 
<?php 
} 

このソースから使用されている：私は達成しようとしている何Codepen: position: sticky with Simply JS

メニュー1と固着下記正しい位置にメニュー3スクロールです。ユーザーがスクロールして上下にスクロールすると、メニューはページ上の正しい位置にスティックしてはずさなければなりません。

Answer 1

は修正が見つかりました：

<script> 
(function($){ 
     var calc_scroll = function() { 
      var header = $('#header').height(), 
       scroll = $(window).scrollTop(); 
       if(scroll >= 450) { 
        $('#sub_menu1').css('padding-top', '30px'); 
       } else { 
        $('#sub_menu1').css('padding-top', '0px'); 
       } 
     } 

     $(window).scroll(function() { 
      calc_scroll(); 
     }); 
})(jQuery); 
</script>