0

I am trying to achieve something like what Webby Awards have done on their webpage.

I did refer one of the of the questions Is it possible to have the url change while you scroll down a single page but could not understand a way to integrate the same in WordPress.

I want to integrate this in a WordPress blog. Could anyone help me with this?

Community
  • 1
  • 1
Joystan Fernandes
  • 203
  • 4
  • 15
  • 2
    Can you explain more in-depth what you tried such that the question is not so dependent on external sites. – CodeTower Apr 13 '15 at 11:24
  • http://stackoverflow.com/questions/6146560/is-it-possible-to-have-the-url-change-while-you-scroll-down-a-single-page This may help you. – Ajay Apr 13 '15 at 11:31
  • @Ajay have you read OP Question? OP provide the same link that you pasted. – jogesh_pi Apr 13 '15 at 11:32
  • @Kabahango I tried looking out for a plugin but could not find any. I'm just a beginner in WordPress so couldn't really understand how to archive this. If you could let me know how to integrate this in WordPress would be really appreciated! – Joystan Fernandes Apr 13 '15 at 12:21
  • So you're asking how to add JavaScript to a WordPress blog? – Siguza Apr 13 '15 at 12:45

1 Answers1

1

HTML

<div id="div1" style="height:500px">div1</div>
<div id="div2" style="height:500px">div2</div>
<div id="div3" style="height:500px">div3</div>
<div id="div4" style="height:500px">div4</div>

JS

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

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

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

$(window).scroll(function() {
    if (isScrolledIntoView("#div1")) { window.history.pushState("state", "title", "/div1"); return; }
    if (isScrolledIntoView("#div2")) { window.history.pushState("state", "title", "/div2"); return; }
    if (isScrolledIntoView("#div3")) { window.history.pushState("state", "title", "/div3"); return; }
    if (isScrolledIntoView("#div4")) { window.history.pushState("state", "title", "/div4"); return; }
});

OR

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // change url here
    }
});
Jagdeesh Kumar
  • 1,640
  • 2
  • 13
  • 29