Show/Hide div id when passing another div id

Question

What I need:

Show 'article_footer' by default
When I pass 'article_footer_base' > 'article_footer' hides
When I then scroll back up passed 'article_footer_base' > 'article_footer' then becomes visible again.

Tried a million things - cant get it to work :( Help!? The below just doesn't really work at all. I've just been trying to nab stuff of SO

My HTML:

<div class="d3-d10">
<div class="article_header">
    <h1>{{ title }}</h1>
        <ul class="center">
            <li><a href="/profile/{{ username }}" class="user_avatar">{{ gravatamatic:quicky
                email = "{email}"
                size  = "32"
                }}</a></li>
            <li><a href="/profile/{{ username }}">{{ username }}</a> on {{ current_date format="M jS, Y" }}</li>
        </ul>
    </div>
</div>
<div class="d3-d10 article_content">
    {{ copy }}
</div>
<div class="d3-d10 source_link article_block_element">
{{ if source_link }}
    <p class="center">Article originally published at {{ source_link }}</p>
{{ /if }}
    <span class="icon-emblem"></span>
</div>
<div class="d3-d10 article_block_element article_footer_base">
    <ul class="left">
    <li><button class="global_btn_red"><span class="icon-upvote"></span>upvote</button> <span class="bold">23 people</span> have upvoted this</li>
</ul>
</div>

My footer (being called in a partial):

</section> <!-- Ending full width section -->
<div class="article_footer">
    <ul class="left">
        <li><button class="global_btn_red"><span class="icon-upvote"></span>upvote</button> <span class="bold">23 people</span> have upvoted this</li>
    </ul>
    <ul class="right">
      <li><button class="global_btn_white"><span class="icon-saved"></span> save for later</button></li>
      <li><a href="http://twitter.com/home?status={{ title }} https://thedigest.org/articles/{{ segment_3 }} - by @digestuk" target="blank" class="global_btn_white icon_btn_white"><span class="icon-twitter"></span></a></li>
      <li><a href="http://www.facebook.com/sharer.php?u=https://thedigest.org/articles/{{ segment_3 }}" class="global_btn_white icon_btn_white"><span class="icon-facebook"></span></a></li>
      <li><a href="mailto:support@thedigest.org" class="global_btn_white icon_btn_white"><span class="icon-flag"></span></a></li>
    </ul>
</div>

My JS:

/**
* Article more dropdown
*/
$('.article_footer').show();

var entryheight = $('.article_footer_base').height();

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 350 && y < entryheight) {
         $('.article_footer').fadeOut();
    } else {
        $('.article_footer').fadeIn();
    }
});

Where is `.article_footer_base` and what is the relevant CSS? Otherwise we don't know when the one passes the other. — Sander Koedood, Aug 13 '15 at 10:45
@SanderKoedood .article_footer_base is in my html snippet documented above. Does the CSS matter? I haven't got anything on there except for styles .... ? — Ed Vinicombe, Aug 13 '15 at 10:57
You're right, I overlooked it. But CSS matters, because otherwise I don't know when `.article_footer_base` passes `.article_footer`. Perhaps you could make a [fiddle](http://jsfiddle.net) out of it? — Sander Koedood, Aug 13 '15 at 10:59
@SanderKoedood Ok cool, got something basic put together here http://jsfiddle.net/m7kjzbmv/1/ — Ed Vinicombe, Aug 13 '15 at 11:06

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

TL;DR

The jQuery that will work is the following:

/**
* Article more dropdown
*/
$('.article_footer').show();

var entryheight = $('.article_footer_base').offset().top;

$(document).scroll(function () {
    var y = $(window).scrollTop() + $(window).height();
    if (y > entryheight) {
         $('.article_footer').fadeOut();
    } else {
        $('.article_footer').fadeIn();
    }
});

TS;WM

(too short, want more)

First, we remove magic numbers. I don't know what 350 stands for, and neither will anyone else.

Then, we check what we need. In this case, it's the offset of the item. The offset, in short, is the distance the item is from the top. We put it in the variable entryheight, as shown above. Now, on scroll ($(document).scroll()), all we need to do is compare the scrollTop() from the window to the offset from the item. If y (the scroll position of the window + the height of the window) is bigger than entryheight, we know we've passed .article_footer_base. Else, we want .article_footer visible.

Here you can see it working: http://jsfiddle.net/m7kjzbmv/4/

edited May 23 '17 at 11:58

Community

1
1

answered Aug 13 '15 at 11:42

Sander Koedood

6,007
6
25
34

Hey Sander, that's almost it! Except I want the div to hide as soon as it hits the '.article_footer_base' div Using the code ontop - it seems as the window waits for the user to scroll past the '.article_footer_base' by the distance of the window. I want it to hide the second it hits 'article_footer_base' – Ed Vinicombe Aug 13 '15 at 12:21
Easy enough, add the window height. I updated it for you. – Sander Koedood Aug 13 '15 at 12:38
Sander - you are a King amongst men! hah! Thanks a lot dude :) – Ed Vinicombe Aug 13 '15 at 12:41
No problem, glad to help. – Sander Koedood Aug 13 '15 at 12:48

Show/Hide div id when passing another div id

1 Answers1

TL;DR

TS;WM