Javascript滚动函数，根据页面类型在不同点添加类

我有一个简单的javascript函数，用于固定侧栏导航，当查看器滚动过页面的某个点时，它会固定侧栏。这是我的第一篇文章，我是javascript新手

现在的问题是，对于有横幅的页面，需要在不同的滚动点添加类

下面是我现在所拥有的，可以工作，但它只使用第二个函数。意思是，我的页面没有横幅，侧栏变得太晚了

$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll > 147) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});
$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll > 263) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});

我确实尝试了一种处理if语句的方法，但现在我需要它不是特定于页面id的。我尝试了[id^=mbItem]选择器，但它不起作用，因为从技术上讲，这两个页面都有id。见下文

$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (div.hasClass('mk-main-wrapper')) {
        if (scroll > 147) {
        div.addClass("fixed-product-nav");
        } else {
        div.removeClass("fixed-product-nav");
        }
    } else {
        if (scroll > 263) {
            div.addClass("fixed-product-nav");
        } else {
            div.removeClass("fixed-product-nav");
        }
    }
});
});

下面是一个没有横幅的页面的HTML结构

<div id="mk-page-id-171" class="theme-page-wrapper mk-main-wrapper">
    <div class="sidebar-wrapper">

下面是带有横幅的页面的HTML结构

<div id="mk-page-id-171" class="theme-page-wrapper mk-main-wrapper">
    <...HTML...>
<div class="theme-page-wrapper">
    <div class="sidebar-wrapper">

因此，页面ID仍然在两个页面上，但它是仅不带横幅的工具条包装的父级

<div id="mk-page-id-171" class="theme-page-wrapper mk-main-wrapper">
    <div class="sidebar-wrapper">

希望这是有意义的，我是在WordPress主题中工作的

---

我觉得我很接近，但也许现在。任何帮助都将不胜感激

我需要查看您的HTML，但我认为您在发布的第二篇文章中瞄准了错误的div。 没有横幅的页面位于mk main wrapper div中，这意味着您不需要搜索。侧边栏包装是否具有类，但很可能是父类或父类，具体取决于您的HTML代码。大概是这样的：

   $(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (div.parent().hasClass('mk-main-wrapper')) {
        if (scroll > 147) {
        div.addClass("fixed-product-nav");
        } else {
        div.removeClass("fixed-product-nav");
        }
    } else {
        if (scroll > 263) {
            div.addClass("fixed-product-nav");
        } else {
            div.removeClass("fixed-product-nav");
        }
    }
});
});

---

谢谢，但实际上没用。我用一个选项更新了这篇文章，实际上我已经开始工作了，但还没有完全完成。我还添加了我的html。我为html标记创建了一个简单的工作示例。检查这里：它只是为了显示您需要使用的工作逻辑。您需要删除.each方法并添加您自己的事件。我知道它是如何工作的，但当我将其应用到我的页面时，它仍然不起作用。我用更新的、更精确的html制作了一个新的JSFIDLE，您可以看到由于某些原因它是如何工作的。它不起作用，因为你又瞄准了错误的分区。您不应以父对象为目标，而应以父对象的父对象为目标。好了：