Question

我有以下jQuery代码，它根据页面的滚动位置在菜单中添加一个类，并且工作正常。

myshop_sticky_header: function () {
        if ( myshop_global_frontend.myshop_enable_sticky_menu == 1 ) {
            var _head   = document.getElementById('header'),
                _cat    = document.getElementsByClassName('block-nav-category')[ 0 ],
                _sticky = document.getElementById('header-sticky-menu'),
                _height = _head.getBoundingClientRect().height;

            if ( $(window).scrollTop() > _height + 100 ) {
                _sticky.classList.add('active');
            } else {
                _sticky.classList.remove('active');
                if ( _cat != null ) {
                    _cat.classList.remove('has-open');
                }
            }
        }
    }

我试图让它工作，如果页面ID是2，那么滚动位置应该是+500 else，上面的代码。我试图在wordpress网站上实现这一点。

由于

Answer 1

If you want to add JS based on page id then you can use the WordPress function

// When Page 2 (ID) is being displayed.
if(is_page( 2 ))
{
   // Your JS for page ID 2 scroll position should be +500
}
else
{
  ?>
  <script>
myshop_sticky_header: function () {
        if ( myshop_global_frontend.myshop_enable_sticky_menu == 1 ) {
            var _head   = document.getElementById('header'),
                _cat    = document.getElementsByClassName('block-nav-category')[ 0 ],
                _sticky = document.getElementById('header-sticky-menu'),
                _height = _head.getBoundingClientRect().height;

            if ( $(window).scrollTop() > _height + 100 ) {
                _sticky.classList.add('active');
            } else {
                _sticky.classList.remove('active');
                if ( _cat != null ) {
                    _cat.classList.remove('has-open');
                }
            }
        }
    }
</script>
<?php
}

Answer 2

在你的JS中，你可以检查身体是否有类page-id-2。例如，在jQuery中，可以用这个来完成：

if($('body').hasClass('page-id-2'))
{
    //do your +500 stuff
}
else
{
    //do your regular stuff
}

使用基于滚动位置和页面ID的jquery添加类

2 个答案: