Question

任何人都知道如何将这个js添加到functions.php中？我正在尝试使用该方法创建一个固定在顶部的导航栏。

$(document).ready(function() {

  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

Answer 1

PHP只能在服务器上运行，因此一旦它到达浏览器，就不会影响您的页面。该脚本需要知道有关页面当前在浏览器窗口中的显示方式的信息，PHP不知道该信息。

这可以进入脚本标记内的模板。假设此特定代码已经适用于您，请记住在添加jQuery之后添加代码。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>
<script>
  $(document).ready(function() {
    $(window).scroll(function () {
        //if you hard code, then use console
        //.log to determine when you want the 
        //nav bar to stick.  
        console.log($(window).scrollTop())
      if ($(window).scrollTop() > 280) {
        $('#nav_bar').addClass('navbar-fixed');
      }
      if ($(window).scrollTop() < 281) {
        $('#nav_bar').removeClass('navbar-fixed');
      }
    });
  });
<script>

这假定jQuery 1并使用jQuery CDN https://code.jquery.com/

修改

根据您对问题的评论：

<?php add_action( 'wp_footer', 'fixed_nav_bar' ); function fixed_nav_bar() { echo ' <script type="text/javascript"> $(document).ready(function() { $(window).scroll(function () { //if you hard code, then use console //.log to determine when you want the //nav bar to stick. console.log($(window).scrollTop()) if ($(window).scrollTop() > 280) { $("#nav_bar").addClass("navbar-fixed"); } if ($(window).scrollTop() < 281) { $("#nav_bar").removeClass("navbar-fixed"); } }); }); </script> '; }

注意：$和jQuery通常是不可比的，但为了安全起见，请随意替换$的{{1}}

但是，理想情况下，您可以将此添加到您的wordpress主题HTML（您的其他JS也应该去那里）。如果您希望在将内容打印到DOM之前让PHP执行某些逻辑，则添加事件会更有用。

将js转换为函数

1 个答案: