.onscroll函数在单个帖子页面上不起作用

时间:2018-07-06 10:07:37

标签: javascript jquery wordpress wordpress-theming

我的网站上有一个非常奇怪的错误。 .onscroll函数可在每个页面上完美运行,但不能在单个帖子上运行。

这是我的代码:

jQuery(document).ready(function($) {

// Fixed header
window.onscroll = function() {fixedHeader()};

var header = document.getElementById("header");
var sticky = header.offsetTop;

function fixedHeader() {
    if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
}

});

我在其他浏览器上进行了不同的测试,但这似乎不是问题。

如果我更改以下代码行,也没有什么不同:

window.onscroll = fixedHeader;

有人知道吗?

2 个答案:

答案 0 :(得分:0)

由于id =“ header”不在单页post.so脚本中,因此没有检测到标题ID。

答案 1 :(得分:0)

我不知道。可能是一个奇怪的错误,所以我重新编写了整个代码和功能,现在可以正常工作了。对于那些想要查看我的新代码的人:

ultimateartist.stickyMenu = {

init: function() {

    var stickyElement = $( '.stick-me' );

    if ( $( stickyElement ).length ) {

        stickyClass = 'make-sticky';

        var stickyOffset = stickyElement.scrollTop();

        // Our stand-in element for stickyElement while stickyElement is off on a scroll
        if ( ! $( '#sticky-adjuster' ).length ) {
            stickyElement.before( '<div id="sticky-adjuster"></div>' );
        }

        // Stick it on resize, scroll and load
        $( window ).on( 'resize scroll load', function(){
            var stickyOffset = $( '#sticky-adjuster' ).offset().top;
            ultimateartist.stickyMenu.stickIt( stickyElement, stickyClass, stickyOffset );
        } );

        ultimateartist.stickyMenu.stickIt( stickyElement, stickyClass, stickyOffset );

    }

},

// Stick the search form
stickIt: function ( stickyElement, stickyClass, stickyOffset ) {

    var winScroll = $( window ).scrollTop();

    if ( stickyElement.css( 'display' ) != 'none' && winScroll > stickyOffset ) {

        // If a sticky edge element exists and we've scrolled past it, hide the filter bar
        if ( ! stickyElement.hasClass( stickyClass ) ) {
            stickyElement.addClass( stickyClass );
            $( '#sticky-adjuster' ).height( stickyElement.outerHeight() ).css( 'margin-bottom', parseInt( stickyElement.css( 'marginBottom' ) ) );
        }

    // If not, remove class and sticky-adjuster properties
    } else {
        ultimateartist.stickyMenu.unstickIt();
    }

},

unstickIt: function() {
    $( '.' + stickyClass ).removeClass( stickyClass );
    $( '#sticky-adjuster' ).height( 0 ).css( 'margin-bottom', '0' );
}