- Joined
- Sep 15, 2014
- Messages
- 4,358
- Likes
- 8,866
- Degree
- 8
@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:
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
javascripts/jQuery right BEFORE the closing </body> tag:
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() {
//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