Scroll Javascript functions for different parent divs

Question

I have a simple javascript scroll function that fixes my sidebar navigation and works fine on it's own, but I need to adjust it so different page types have different scroll events. Example: pages with banners need to have the fixed sidebar at a different scroll point that pages without a sidebar.

The indicator of a different page will be that the sidebar for a page without a banner will have a parent div that a page with a banner will not have. I am using a wordpress theme so my customization on this is limited.

Below is my example HTML and JS, but you can also see it at : 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" );
    }
});
});

For simplification purposes, I used background color, but my actual JS will use "addclass". See JS below:

$(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");
    }
});
});

The issue is I cannot get the first IF Statement true, which you can see at the JSFiddle. It looks like something with the parent elements.

I feel like I'm close and just missing something.

Thanks!

epascarello · Accepted Answer · 2015-01-15T17:53:08.313

1

jQuery objects will always be truthy. You need to check the length to see if it is greater than zero.

You also do not have a class selector, it is missing the .

Also & is not correct, it needs to be &&

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

to

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

edited Jan 15 '15 at 17:53

answered Jan 15 '15 at 17:42

epascarello

204,599
20
195
236

Thanks for your response, but bare with me as I'm new to JS. What do you mean check the length to see if it is greater than zero? – cody Jan 15 '15 at 17:46
`....length > 0`, but you can get away with a truthy check, hence why I dropped that and just left it at length. http://stackoverflow.com/questions/7615214/in-javascript-why-is-0-equal-to-false-but-not-false-by-itself – epascarello Jan 15 '15 at 17:50
I replaced with `if ($("sidebar-wrapper").closest(".mk-main-wrapper").length && scroll > 147) {` but it still responds the same where the first IF statement does not work. Am i still missing something? Thank you! – cody Jan 15 '15 at 17:51
Ah, your selector is wrong, missed that. You are using "element" selectors, not class "selectors". You need a "." to select a class. – epascarello Jan 15 '15 at 17:52
I used `if ($(".sidebar-wrapper").parents(".mk-main-wrapper") && scroll > 147)` and the first IF is now true, but the second IF does not seem to work yet. It might be weird since I'm using the same css action, but I applied to me actual page and the first IF still applied for the page that needed the second if (scroll > 263). – cody Jan 15 '15 at 17:59
1

`$(".sidebar-wrapper").closest(".mk-main-wrapper").length && scroll > 147` worked perfectly on my actual page. Thanks a ton! Been playing with this for days. – cody Jan 15 '15 at 18:01

Scroll Javascript functions for different parent divs

1 Answers1