MyBB

ESR360 · 2013-01-04, 01:22 AM

Ok basically I am trying to add a menu which isn't fixed at the top of the screen, but when you scroll it does become fixed, see here for an example of what I'm talking about:

http://www.dwuser.com/education/content/...plete.html

I came across this code which seems to be exactly what I need:

http://jsfiddle.net/QqEcC/888/

I created a javascript file call "nav.js" containing the following code:

$(window).scroll(function(){
    if ($(window).scrollTop() >= 200)
    {
        $("#floatbar").css({position:'fixed',left:'0',top:'0'});
    }
    else
    {
        $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
    }
});

And uploaded it to my server, then added this line into my headerinclude:

<script type="text/javascript" src="{$mybb->settings['bburl']}/{$theme['imgdir']}/customjs/nav.js"></script>

And added this to the top of my header template:

<div id="floatbar" style="background: gray; width:200px; height:40px; position:absolute; left:0;top:200px;">    </div>

The bar appears but doesn't float when I scroll, it just disappears off the screen.

I'm not knowledgeable on JavaScript, but I don't see why this isn't working. The js source is definitely correct, when I view the page source code I can view the javascript code in the <head> tags.

Thanks

effone · 2013-01-04, 10:09 AM

Its a conflict you are being encountered I guess.

I have just bind it using document ready and it is working fine.

I have added the following little modified code at the very end of the header template:


<div style="height:1000px;width:500px;">
    <div id="floatbar" style="background:gray;
                                width:200px;
                                height:40px;
                                position:absolute;
                                left:0;top:200px;">
    </div>
</div>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() > 200 )
    {
        jQuery("#floatbar").css({position:'fixed',left:'0',top:'0'});
    }
    else
    {
        jQuery("#floatbar").css({position:'absolute',left:'0',top:'200px'});
    }
});
});
</script>

ESR360 · 2013-01-04, 05:41 PM

(2013-01-04, 10:09 AM)effone Wrote: Its a conflict you are being encountered I guess.

I have just bind it using document ready and it is working fine.

I have added the following little modified code at the very end of the header template:


<div style="height:1000px;width:500px;">
    <div id="floatbar" style="background:gray;
                                width:200px;
                                height:40px;
                                position:absolute;
                                left:0;top:200px;">
    </div>
</div>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() > 200 )
    {
        jQuery("#floatbar").css({position:'fixed',left:'0',top:'0'});
    }
    else
    {
        jQuery("#floatbar").css({position:'absolute',left:'0',top:'200px'});
    }
});
});
</script>

Thank you very much, whatever you did it worked Smile

+1 for you.

Login
Username:
Password:	Lost Password?
	Remember me