Adding the scoreboard bar to your theme

So adding the scoreboard bar to your website is extremely simple. All you have to do is add the following function into any template you want.

<?php echo sports_bench_scoreboard_bar(); ?>

It’s literally that easy. No weird code to write. And really no vast knowledge of PHP is required. Just drop that in and go.

Manipulating the scoreboard bar

But maybe you want to manipulate this new tool that you’ve found. After all, ESPN’s scoreboard bar sticks to the top of the page. So to get it to stick to the top of the page while the user is scrolling, use the following line of code:

<?php echo sports_bench_scoreboard_bar( 'scoreboard-stick' ); ?>

Then you’ll need the following lines of CSS:

.scoreboard-stick {
  position: fixed;
  margin: 0 auto !important;
  top: 50px;
  width: 100%;
  max-width: none !important;
  @include boxShadow-important(0px,5px,10px,0px,$dark-gray);
}

So essentially, the scoreboard bar function takes in a parameter which it uses to add a class to the bar. And then from that class, we make it stick to the top of the page.

But, what if you wanted it to be somewhere inside the page and then stick it to the top when the user scrolls passed it, like what happens on the Sports Bench theme homepage. Well, then you would add the following lines of JavaScript:

var s = jQuery("#scoreboard-bar");
if ( jQuery( 'body' ).hasClass( 'home' ) ) {
   var pos = s.position();
   jQuery(window).scroll(function () {
      var windowpos = jQuery(window).scrollTop();
      if (windowpos + 22 >= pos.top) {
         s.addClass("scoreboard-stick", 50, "linear");
      } else {
         s.removeClass("scoreboard-stick");
      }
   });
}

And there you have it. That’s all you need to get the bar to stick and unstick when the user scrolls by it.

Like all of the other tutorials here, this is just the beginning with what you can do with the scoreboard bar. You can do practically anything you want with the scoreboard bar if you want to play around with it. And if you want to show off how you’ve changed your scoreboard bar, let me know in comments below or shoot me an email. I would love to showcase your amazing work.