MyBB Community Forums

Basically I'm trying to get my div #panel to stick to the top of the screen when i scroll down past it, follow my scrolling but return to its original place if i scroll up past it.
So I jumped over to stackoverflow to look at some stuff that should do this.

After going through a few discussions and demo's of how to do it, I saw a smooth demo (no laggy scrolling or catching up) so decided to copy what they did.

I added this javascript into a file called stickypanel.js (I checked the console on page load, it gets the file fine)

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#panel-anchor').offset().top;
    if (window_top > div_top) {
        $('#panel').addClass('stick');
    } else {
        $('#panel').removeClass('stick');
    }
}

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

Added this to my themes global.css

#panel.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

and I put the anchor div above the panel div

<div id="panel-anchor"></div>
<div id="panel">{$welcomeblock}</div>

Nothing appears to be happening whatsoever, has anybody here used any method for something like this successfully?

Try replacing your Javascript in the file with:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#panel-anchor').offset().top;
    if (window_top > div_top) {
        $('#panel').addClass('stick');
    } else {
        $('#panel').removeClass('stick');
    }
}

jQuery.noConflict();
jQuery(function ($) {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

It seems like a clashing of libraries is all.

Still doesn't seem to be working.

Noticed in the console now though;
TypeError: $(...).scrollTop is not a function

Make sure you include the jQuery library right before including the script I gave:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

You could give http://stickyjs.com/ a try.

Good luck!

(2014-07-09, 03:01 AM)maniacmusic Wrote: [ -> ]You could give http://stickyjs.com/ a try.

Good luck!

I managed to get it going with this very easily.

had to edit the javascript a little to get the width correct, then add a z-index: 10000 onto my #panel so things like star ratings and tabs didnt go over it.

edit;
as much as it got it working, and how I wanted it to look, it would destroy some of my site (popup edit button, any hover-over text now isn't formatted as it should be)

SickyJS doesn't add styles, i suspect a jQuery conflict because you said the popup button didn't work.
I'd suggest you make your theme for 1.8, it's a lot easier to work with because the jQuery thing.