为不同父 div 滚动 Javascript 函数

Question

我有一个简单的 javascript 滚动功能，它修复了我的侧边栏导航并且可以独立运行，但我需要对其进行调整，以便不同的页面类型具有不同的滚动事件。示例：带有横幅的页面需要在与没有侧边栏的页面不同的滚动点处具有固定的侧边栏。

不同页面的指示器是没有横幅的页面的侧边栏将具有父级 div，而带有横幅的页面则没有。我使用的是 wordpress 主题，所以我对此的自定义是有限的。

下面是我的例子HTML和JS，你也可以在http://jsfiddle.net/61L4ac2j/

看到

HTML:

<div id="mk-page-id-1" class="theme-page-wrapper mk-main-wrapper">
<aside id="mk-sidebar" class="mk-builtin test">
<div class="sidebar-wrapper" style="min-height:600px;">
    Page without banner example
</div>
</aside>        
</div>

<div id="mk-page-id-2" class="theme-page-wrapper">
</div>
<div class="theme-page-wrapper">
<aside id="mk-sidebar" class="mk-builtin">
<div class="sidebar-wrapper" style="min-height:600px;">
    Page with banner example
</div>
</aside>
</div>

JS:

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

    if (($("sidebar-wrapper").parent().parent("mk-main-wrapper")) & (scroll > 147)) {
        div.css( "background", "yellow" );
    } else if (scroll > 263) {
        div.css( "background", "green" );
    } else {
        div.css( "background", "blue" );
    }
});
});

为了简单起见，我使用了背景颜色，但我的实际 JS 将使用 "addclass"。见下文JS：

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

    if ($("sidebar-wrapper").parent().parent("mk-main-wrapper") & scroll > 147) {
        div.addClass("fixed-product-nav");
    } else if (scroll > 263) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});

问题是我无法使第一个 IF 语句为真，您可以在 JSFiddle 上看到它。它看起来像是带有父元素的东西。

我觉得我很接近，只是错过了一些东西。

谢谢！

Answer 1

jQuery 对象永远是真实的。您需要检查长度以查看它是否大于零。

您也没有 class 选择器，缺少 .

另外&也不对，需要&&

$("sidebar-wrapper").parent().parent("mk-main-wrapper")  & scroll > 147

到

$(".sidebar-wrapper").closest(".mk-main-wrapper").length  && scroll > 147

为不同父 div 滚动 Javascript 函数

Scroll Javascript functions for different parent divs

javascript

wordpress

jquery

scroll