.onscroll 功能在单个帖子页面上不起作用答案

【问题标题】：.onscroll function not working on single post page.onscroll 功能在单个帖子页面上不起作用
【发布时间】：2018-07-06 10:07:36
【问题描述】：

我的网站上有一个非常奇怪的错误。 .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;

有人知道吗？

【问题讨论】：

可能是你在单页中写了一些与滚动功能冲突的脚本，在代码中一一删除来调试它
感谢您的回复，但仍然没有解决问题...

标签： javascript jquery wordpress wordpress-theming

【解决方案1】：

似乎是因为 id="header" 不在单页 post.so 脚本中没有检测到 header id。

【讨论】：

不幸的是，情况并非如此。 id也在单页上。

【解决方案2】：

我想不通。可能是一个奇怪的错误，所以我重新编写了整个代码和函数，现在它工作得很好。对于那些想要查看我的新代码的人：

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' );
}

【讨论】：