jQuery - Change text and link based on anchor visability

Question

I have a breadcrumb's text and link that needs to be updated when an anchor on this very long page is reached.

Example:

<div class="crumbs hidden-xs">
<a href="#">Parent link</a>   /   <a href="#summary" class="link-location">Summary</a>
</div>

Example of anchor far down on the page:

<h1 id="chapter-2" class="page-location">Chapter 2 title here</h1>

When the above anchor is at the top of the screen, I need:

<a href="#summary" class="link-location">Summary</a>

to change to:

<a href="#chapter-2" class="link-location">Chapter 2 title here</a>

and when I am all the way back at the top of the page there should be no breadcrumb:

<div class="crumbs hidden-xs">
<a href="#">Parent link</a>
</div>

I have tried a number of things and I'm a bit puzzled. This lead to me getting the menu to work:

$("#main-nav .panel a").on("click", function() {
$('.link-location').html( $(this).html() );
});`

I have also tried the following:

var t = $(".page-location").offset().top;
$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('.link-location').html( $(this).html() );
    }
});

This doesn't seem to do anything for me.

You can find an example of my layout here: http://jsfiddle.net/15298c0p/

Any help would be greatly appreciated.

`any thoughts` is not a real question here. try something and when it doesn't work the way you want come back with your code and ask for help then — charlietfl, Sep 11 '14 at 01:51
I'm sorry. I thought that "I have tried everything I could find" was a given. I have edited my problem if it matters. — Daniel, Sep 11 '14 at 01:58
getting better at showing code, that's important here as it shows effort and is better to learn based on mistakes. Create a demo with the scroll handler in jsfiddle.net or plnkr.co — charlietfl, Sep 11 '14 at 02:16
@charlietfl Well, we all have to start somewhere ;) I made a jsFiddle for your review (added at the bottom of the questions). — Daniel, Sep 11 '14 at 02:33
Hey @charlietfl, Just wanted to check back in on this question to see if you had any pointers? — Daniel, Sep 11 '14 at 20:32
@charlietfl sorry about that. Thanks for looking into it. New link: http://jsfiddle.net/15298c0p/ — Daniel, Sep 11 '14 at 23:24
here's a suggestion, there are numerous plugins like jQuery Waypoints that would hep you out. Right now `$('.link-location').html( $(this).html() );` isn't right because `this` is the document. Also need to realize that scroll event fires many times a second so should throttle it and only make changes when thresholds are crossed — charlietfl, Sep 11 '14 at 23:34

score 0 · Answer 1 · edited May 23 '17 at 11:57

See https://stackoverflow.com/a/488073/1697755

There's a handy function for checking element visibility:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

And to use the function might look a little something like this: http://jsfiddle.net/5xgw82ft/1/

You should adjust the offsets as desired.

jQuery - Change text and link based on anchor visability

1 Answers1