Show current section's heading in a fixed position on side

Question

For a one-page layout website I would need the current section's heading to display in a fixed position on the left side of the screen in order to show the user where he currently is.

The heading will probably have an icon on its left side. I would like the floating heading to be only visible when the user is scrolling on the page, thus disappear when he halts, while the icon stays visible all the time. Is that possible?

Answer 1

This is possible, and most easily done in JQuery. In CSS using

position: fixed;

Will allow you to position a element, then it'll stick where it is on the screen, regardless of the user scrolling up and down the page. Using this JQuery code:

$(window).scroll(function(){
}

Will detect when the user scrolls then will run whatever is inside of the function. If you put this inside of the function:

$("#scrollerbar").css({"display": "block"});
clearTimeout($.data(this, 'scrollTimeout'));
$.data(this, 'scrollTimeout', setTimeout(function() {
    $("#scrollerbar").css({"display": "none"});        
}, 250));

With this HTML:

<div id="scrollerbar">You're scrolling</div>

And the following CSS:

#scrollerbar{
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
}

This will create and position the div scrollerbar 50px down the page and set it to be invisible. Then whenever the user scrolls, it will set the scrollerbar to display: block (which makes it visible). Then stops the timeout "scrollTimeout" (if it's running). Then create the timeout "scrollTimeout" what will wait 250 milliseconds then set scrollerbar to invisible again.

Here's a JSFiddle: http://jsfiddle.net/Xanco/5q6oq8tm/

Please contact me if you have some questions.

EDIT

In order to answer the first part of your question, I've updated the JSFiddle: http://jsfiddle.net/Xanco/5q6oq8tm/2/

The scrollerbar contains a set of list items, each will be bound to a div:

<li id="1read">Reading 1</li>
<li id="2read">Reading 2</li>
<li id="3read">Reading 3</li>
<li id="4read">Reading 4</li>

There's also a new class name:

.active{
    font-weight: bold;
}

I've created a function that will remove all "active" class names from the list items in the scrollerbar:

function removeActive(){
    $("#1read").removeClass("active");
    $("#2read").removeClass("active");
    $("#3read").removeClass("active");
    $("#4read").removeClass("active");
}

And now whenever the user scrolls, JavaScript will check what the user is currently reading and add the "active" class to the appropriate list items in the scrollerbar:

if ($("#1").is(":hover")) {
    removeActive();
    $("#1read").addClass("active");
}
if ($("#2").is(":hover")) {
    removeActive();
    $("#2read").addClass("active");
}
if ($("#3").is(":hover")) {
    removeActive();
    $("#3read").addClass("active");
}
if ($("#4").is(":hover")) {
    removeActive();
    $("#4read").addClass("active");
}

EDIT 2

Now, the JavaScript will take the innerText of a child of the hovered div with the ID "articleheader" instead of using a non-standard attribute, as demonstrated by this line of code:

$("#displayaArticleName").text($(this).children("#articleheader")[0].innerText);

Here is the JSfiddle: http://jsfiddle.net/5q6oq8tm/6/

Please note that there are no set of attributes that can only be used, you may use custom attributes, as demonstrated here: http://jsfiddle.net/5q6oq8tm/4/