Sticky-Header mit Javascript funktioniert nicht

Hallo,

ich suche nun schon seit mehreren Stunden nach einer Lösung. Ich habe bereits alle möglichen Artikel zur JS einbindung und Fehlerbehebung auf deutsch und english gelesen, leider ohne Erfolg.

Ich binde mein JS wie folgt ein. Alles andere habe ich auch ausprobiert, wenn der Code im Quelltext erscheint, sollte ja alles iO sein, oder?

function my_add_js(){
    $theme_uri = get_template_directory_uri();
    wp_enqueue_script( 'script01',  $theme_uri . '/javascript.js', false, '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_add_js' );

Habe das schon in den Footer verlagert, damit es nicht zu früh läd, brachte aber nichts.

Das Script sieht so aus:

$(function(){
  $(window).scroll(function(){
    var winTop = $(window).scrollTop();
    if(winTop >= 30){
      $(".NAVI").addClass("sticky");
    }else{
      $(".NAVI").removeClass("sticky");
    }
  });
});

Ich habe auch viele andere Scripte ausprobiert und mit Firebug geprüft. Nichts funktioniert.

Der Rest ist, glaube ich, weniger relevant. Das Menu:

<section id="sticky" class="NAVI">

.sticky {
  position: fixed;
}

Der entscheidende Punkt ist, dass die Klasse nicht im Quelltext eingefügt wird. Wenn ich das ganze aber hier teste: https://codepen.io/soulrider911/pen/dGuEn dann funktionieren diese Scripte. Binde ich das also doch falsch ein? Oder übersehe ich ein Problem, dass Wordpress hat?

Danke.

Danke, es funktioniert.

Aber woran liegt das? Dass jquery schon geladen wird und somit einen Konflikt verursacht?

Sorry, ich kenne mich nicht besonders gut mit JavaScript aus. Das Problem was ich mit dem ursprünglichen Script haben, ist, dass die Fixierung erst bei einem bestimmten Wert greift.

Dieses Script scheint so zu arbeiten, dass es erst greift, wenn der Anker oben angelangt ist. Leider bekomme ich die Anpassung nicht so hin, dass es auf die oben beschriebene Weise funktioniert. Oder lässt sich das auch mit dem obrigen Script einfach erreichen?

var StickyElement = function(node){
  var doc = $(document), 
      fixed = false,
      anchor = node.find('.sticky-anchor'),
      content = node.find('.sticky-content');
  
  var onScroll = function(e){
    var docTop = doc.scrollTop(),
        anchorTop = anchor.offset().top;
    
    console.log('scroll', docTop, anchorTop);
    if(docTop > anchorTop){
      if(!fixed){
        anchor.height(content.outerHeight());
        content.addClass('sticky');        
        fixed = true;
      }
    }  else   {
      if(fixed){
        anchor.height(0);
        content.removeClass('sticky'); 
        fixed = false;
      }
    }
  };
  
  $(window).on('scroll', onScroll);
};


var demo = new StickyElement($('#sticky'));

Sorry für den verfrühten Post.

Haben eine Script gefunden, was kürzer ist:

$(document).ready(function() {
  var top = $('.NAVI').offset().top;
  $(window).scroll(function() {
      if($(this).scrollTop() > top) {
        $('.NAVI').addClass('sticky')
      } else {
        $('.NAVI').removeClass('sticky');
      }
    });
  });

Habe aber eine einfachere Anpassungsmöglichkeit gefunden. Man packe einfach folgende Code drummherum.

jQuery(function ($) {
    // ursprüngliches Script ...
});

Danke.