jQuery: Title Change to Header Text on Scroll - DevSeries

[CCarter]

@JasonSc asked about a script that changes the title to the header as you scroll (http://www.complex.com/pop-culture/2013/05/most-underrated-simpsons-characters/ is doing it), so I quickly whipped up a version for you kids. It's pretty simple javascript and jquery. You'll need to add the class ".list_slide" to all the header elements you want to display in the sequence:

javascripts/jQuery right BEFORE the closing </body> tag:

<!-- Stuff that makes the javascript run - @MercenaryCarter -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {

       //Monitor scrolling
       $(window).scroll(function (event) {
           
           //y = current top position of window
           var y_pos = $(this).scrollTop();
           var current_title = document.title;

           $('.list-slide').each(function() {
               // if y_pos, the current top position of window, is past an element change the Title to that element's text.
               if (y_pos > $(this).offset().top) {
                    current_title = $(this).text() + ": CCarter's Money Over Ethics";
               }
           });

        //console.log("FOUND Furthest Down Title = [" + current_title + "]");
        document.title = current_title;

       });
   });
</script>
<!-- Stuff that makes the javascript run - @MercenaryCarter -->

Here is a Demo version of it (notice the your browser's title changes as you scroll down): Title Change to Header Text on Scroll

Note, if you already are loading jquery, don't reload it again, remove it.

You guys might want to start giving me real challenges.

-- CC

 

[Ryuzaki]

I always wondered how they pulled this off. I've seen web-based games update the tab as you're not in it so you can monitor the game without looking at it (for people at a day job, etc).

What about the URL in the address bar? Can jQuery manipulate that as well, since it's not part of the DOM? That part's critical to getting backlinks to the right link.

 

[CCarter]

What about the URL in the address bar?

Yes you can, but you have to be very careful. If you update the URL slug like in the article you have to make sure your CMS will read it correctly. For example here is a version I have that updates the slug: Title Change and URL Change on Scroll

Example Header Code:

<h3 class="list-slide" data-slug='about'>About</h3>

Javascript Code:

		//Monitor scrolling
		$(window).scroll(function (event) {
			
			//y = current top position of window
			var y_pos = $(this).scrollTop();
			var current_title = document.title;
			var new_slug;

			$('.list-slide').each(function() {
				// if y_pos, the current top position of window, is past an element change the Title to that element's text.
			    if (y_pos > $(this).offset().top) {
					 current_title = $(this).text() + ": CCarter's Money Over Ethics";
					 new_slug = $(this).data("slug");
				}
			});

   		 if (new_slug) {
			 if (new_slug.length > 0) {
			 //console.log("FOUND Furthest Down Title = [" + current_title + "]");
			 document.title = current_title;
			 window.history.pushState("", current_title, original_path + "" + new_slug);
		 	}
		 }


		});

--
Here is the thing: since the site is on Wordpress, if you were to scroll down the slugs change according to a new element I inputted into the header called 'data-slug'. The problem is if you were to copy and paste that new URL it generates the link would return a 404 error.

Example the following URL is created:

http://www.moneyoverethics.com/buso/title-change-and-url-change-on-scroll/about

^^ Going to that URL would produce a 404 error. HOWEVER you can add a #hash in the "window.history.pushState" part and that fixes it:

 window.history.pushState("", current_title, original_path + "#" + new_slug);

--

And I know you guys like being all really fancy, so I guess you guys want the hash to work by scrolling to the hash location, so here is the final code:

<!-- Stuff that makes the javascript run - @MercenaryCarter -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
       
       var original_path = window.location.pathname;       
       var current_hash = window.location.hash.substr(1,(window.location.hash.length-1));

           //Scrolls to new hash location
           if(current_hash) {               
               $('.list-slide').each(function() {
                   if ($(this).data("slug") == current_hash) {
                         window.scrollTo(0, ($(this).offset().top + 1));
                   }
               });
           }

       //Monitor scrolling
       $(window).scroll(function (event) {
           
           //y = current top position of window
           var y_pos = $(this).scrollTop();
           var current_title = document.title;
           var new_slug;

           $('.list-slide').each(function() {
               // if y_pos, the current top position of window, is past an element change the Title to that element's text.
               if (y_pos > $(this).offset().top) {
                    current_title = $(this).text() + ": CCarter's Money Over Ethics";
                    new_slug = $(this).data("slug");
               }
           });

            if (new_slug) {
            if (new_slug.length > 0) {
            //console.log("FOUND Furthest Down Title = [" + current_title + "]");
            document.title = current_title;
            window.history.pushState("", current_title, original_path + "#" + new_slug);
           }
        }


       });
   });
</script>
<!-- Stuff that makes the javascript run - @MercenaryCarter -->

Here is a Demo of the Hash Version With Auto Scroll: http://www.moneyoverethics.com/buso/title-change-and-url-change-on-scroll/with-hash/#who-is-ccarter

Here is a Demo WITHOUT the Hash (like in the article - will produce 404 errors on some CMSs): http://www.moneyoverethics.com/buso/title-change-and-url-change-on-scroll/