Okay
  Print

Return to Top and Sticky Navigation example customizations

Question:

Hi,

When working with long lists i scroll down a lot. And the main nav bar also scrolls away.

Can you make the nav bar sticky?

And introduce a "Go to Top" that pops up on the bottom right corner when scrolling down?

Answer:

You can but the simplest solution is to limit your results per page to something manageable in your backend settings.  

Otherwise - Remember you can use your Custom CSS and Custom JS sections in the Backend Settings to make all sorts of modifications,  and having a working knowledge of both will be to your benefit with these kinds of things.

Here's some example code for these items...

Sticky bar, clone and overlay it...

CSS

.new-toolbar {
   position:fixed;
   top:0;
   z-index:999;
}
.pure-toggle-label {
   z-index: 1000;
   position: fixed;
   top:0;
}

if you want the sidebar fixed, simple css....

.pure-drawer {

position: fixed;

}

In the file assets/js/frontend.js you'll need to wrap a function in a window load function so about line 100 to 157 needs to be wrapped.

$(window).load(function() {

// lines 100 to 157 (depending on what's changed in the plugin) go in here... its the /*Select search lists*/ section

});

Then you can add the following js to the custom js section...

jQuery(function ($) {
    /* clone toolbar */
    $(document).ready( function() {
        var $toolbar = $('.wcp-toolbar').clone(true);
        $('.wcp-toolbar').remove();
        $toolbar.addClass('new-toolbar');
        $('body').prepend($toolbar);
    });
});




Return to top button link

CSS

/* scroll top */
a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
        line-height: 60px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
        text-align:center;
        color: #fff;
    background-color: #27AE61;
    border-radius: 5px;
}

JS

jQuery(function ($) {
    $('body').prepend('<a href="#" class="back-to-top">Top</a>');

    var amountScrolled = 300;

    $(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('a.back-to-top').fadeIn('slow');
    } else {
        $('a.back-to-top').fadeOut('slow');
    }
    });

    $('a.back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
    });
});