Question

我有一个简单的javascript滚动功能，修复了我的侧边栏导航，并且可以自行正常工作，但我需要调整它，以便不同的页面类型具有不同的滚动事件。示例：带横幅的页面需要将固定侧边栏设置在不带侧边栏的页面的不同滚动点上。

不同页面的指示器将是没有横幅的页面的侧边栏将具有父横幅，具有横幅的页面将不具有该父页面。我正在使用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对象永远是真实的。您需要检查长度以查看它是否大于零。

您也没有类选择器，它缺少.

&也不正确，需要&&

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

到

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

滚动不同父div的Javascript函数

1 个答案: