Change href url once browser scrolls down

Question

I am attempting to change a href url once the browser scroll down. I am swapping css classes based on browser position. I am swappping out an image with an anchor down tag applied to it with a logo that I now what to have a home link applied to it.

Check my site here: http://www.paynecocraft.com (WIP)

The main page has a yellow arrow at the bottom. Click it and the browser scrolls, the nav becomes sticky and the logo appears. I would like the logo to have a homepage link once it gets to that point.

Here is my html

<nav>                        
<ul class="inline-list main-links">
<li class="linkitem"><a href="#">About</a></li>
<li class="linkitem"><a href="#">Work</a></li>
<li class="linkitem"><a href="http://www.paynecocraft.com/store">Store</a>   </li>
<li class="circlearrow"><a id="changeonscroll" href="#scrolldown"></a></li>
<li class="linkitem"><a href="#">Plans</a></li>
<li class="linkitem"><a href="#">Contact</a></li>
<li class="linkitem"><a href="#">Blog</a></li>
</ul>
</nav>

I'm referring to the "circlearrow" li.

Here is the javascript I am using, but its not working. I'm just now diving into Javascript so I probably don't have something right. Forgive me.

<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 80;
if ($(window).scrollTop() > navHeight) {
document.getElementById("changeonscroll").href = http://www.paynecocraft.com;
}
});
});
</script>

http://www.paynecocraft.com should be in string form so document.getElementById("changeonscroll").href = "http://www.paynecocraft.com"; — George
– George, Commented Aug 21, 2015 at 15:42

michelem · Accepted Answer · 2015-08-21 15:42:50Z

1

Try this:

JSFiddle (you need to resize the window to try to scroll)

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - 80;
        if ($(window).scrollTop() > navHeight) {
            $("#changeonscroll").text('Hello World').attr('href', 'http://www.paynecocraft.com');
        }
    });
});

answered Aug 21, 2015 at 15:42

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Derek Payne Over a year ago

Thanks for the quick reply. I believe this worked. I took out the .text('hello world') for my instance, but it seems to do the trick!

Collectives™ on Stack Overflow

Change href url once browser scrolls down

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related