Tab Names Included in Scrollbar

Question

I have a problem on my website using JavaScript tabs where the tab names are included in the scrollbar, rather than just the content of the tabs, and so when the user scrolls down, the tab names disappear. I've put the code I have on JSFiddle linked below. If it's relevant, I'm embedding this in my site's main page by using:

<iframe class='demo' src='tabs.html' style='height:350px; width:700px' frameborder='0'></iframe>

http://jsfiddle.net/08ghjmnv/

Can someone please show me how to change my code so that the tab names/headers are not included in the scrollbar, so they're always visible for the user to click to change tabs?

Thanks in advance :) .

Answer 1

Try this.

.tabs {
  position: fixed;
}

Demo here