Long Form Helper - style.less file - goes with https://gist.github.com/bearded-avenger/6772441

style.less

.article-wrap {
    position: relative;
}

.scroll-nav {

}
.scroll-nav{
    @size: 12px;
    @bg:    @baseContrastSlight;

    position: absolute;
    margin-left:-140px;
    background:@bg;
    border:1px solid darken(@bg,7);
    width:120px;
    font-size:@size;
    line-height:@size + 4;
    .transition(top .2s linear);

    &.fixed {
        position: fixed;
    }

    &.ba-longform-right {


        &.fixed {
            
        }
    }

    .scroll-nav-heading {
        position: relative;
        padding:4px 4px 4px 22px;
        .box-sizing(border-box);
        display: block;
        margin-bottom:1px;
        text-transform: uppercase;
        background: darken(@bg,5);

        &:before {
            content:'\f140';
            font-family: PageLinesFont;
            position: absolute;
            left:5px;
            top:4px;
        }
    }
    .scroll-nav-list {
        margin:0;
        padding:0;
        list-style: none;
    }
    .scroll-nav-link {
        display: block;
        padding:4px 6px;
        border-bottom:1px solid darken(@bg,7);
        color:inherit;
        .box-sizing(border-box);

        &:last-child {
            border-bottom:none;
        }

        &:hover {
            background: @pl-link;
            color:fadeout(@white,5);
        }
    }

    .scroll-nav-item.active {
        background: @pl-link;
        color:fadeout(@white,5);
    }
}

@media(max-width:@plContentWidth + 260){ //width of our scroll nav + post loop default 20px padding
    .scroll-nav.fixed,
    .scroll-nav {
        position: static !important; //overriding js
        margin-left:0;
        width:100%;
        .fix();

        .scroll-nav-link{
            float: left;
        }
    }
}