MyBB Community Forums

I've been trying to figure this out for like a day now with no luck. What i'm bacsically trying to replicate this this http://jsfiddle.net/cBk7q/(div following on top when scrolling down) for my div #panel @bobbaxtrade.com. It should be easy i'm adding the js on the header with the proper statement so it doesn't interfeare with prototypejs, but the div won't follow when scrolling down :/.
Thanks in advanced for any help given!

Try something like this:

Theme changes.

Add in global.css:

.fixedPannel 
{ 
position: fixed; 
top: 0; 
left: 0;
}

And change some templates.

header template:

change <div id="panel"> to <div id="panel" class="scrollpannel">

header include template:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.noConflict();
jQuery(function($) {
	$(document).scroll(function() {
    
    var divFollow = $(document).scrollTop() > 100;
    $('.scrollpannel').toggleClass('fixedPannel', divFollow);
    
	});
});
</script> 

Not 100% sure about the jquery no conflict part though but here is the example:

http://jsfiddle.net/cBk7q/12/

I'm going to try it right now and let you know! Thank you!

How weird, the panel just messes up after doing all the of the above as indicated

Edit: Got the code to work, but it's responding wrong the panel goes away when scrolling down

Edit2: Damn it I feel that it's a dumb mistake i'm doing as the it should easily work right away..

Hmm..

Try the following edit the id panel in the global.css
Look if there is something like position .. etc if there is that line remove it.

#panel {
	background: #efefef;
	color: #000000;
	font-size: 11px;
	etc.
        top: 0; 
        left: 0;
}

And change the code slightly like:

jQuery.noConflict();
jQuery(function($) {
    $(document).scroll(function() {
    
    var divFollow = $(document).scrollTop() > 100;
    $('#panel').toggleClass('fixedPannel', divFollow);
    
    });
});

Also dont remove the other class fixedPannel:

.fixedPannel 
{ 
    position: fixed; 
    top: 0; 
    left: 0;
}

Something like this:

http://jsfiddle.net/cBk7q/14/

EDIT

Nevermind just looked at you code:

margin: auto;
border-bottom: 1px solid rgba(0,0,0,.6);
border-top: 0;
box-shadow: 0 1px rgba(0,0,0,.1),
       1px 0 rgba(0,0,0,.1),
       -1px 0 rgba(0,0,0,.1),
       0 -1px rgb(255,255,255) inset,
       0 1px 2px rgba(0,0,0,.2) inset,
       1px 0 rgb(255,255,255) inset,
       -1px 0 rgb(255,255,255) inset;
background: #E8E8E8;    
    width: 72%;
-webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
    color: rgba(0,0,0,.7);
        text-shadow: 0 1px white;
    padding: 2px 0px 2px 8px;
    margin-top: -149px;
    text-align: left;
    font-size: 11px;

Is your #panel no position thing there.

I'm going to try this out right now. Hope it works man. I really appriciate all the time you are spending helping me. Really, thanks

---

Edit: That was pretty close... now the container is the one scrolling down for some reason. Im going to leave it like that so maybe you could take alook, perhaps modifing the CSS would make it work?

try changing:

$('#panel').toggleClass('fixedPannel', divFollow);

To:

$('.menu').toggleClass('fixedPannel', divFollow);

http://jsfiddle.net/cBk7q/15/

The menu does scroll down!! Weird, must be the panel's CSS then?

---

Perhaps, the search div inside the panel is interfering? I feel so close to figure this out lol, I posted this on stackoverflow, but not even there I got this close.

jQuery is the most amusing and worst, both things.

If you understand it, you would feel like king, and if there is certain part which is not working, you would keep on pinching your hairs for days, just like I did couple of days ago.

(2012-05-07, 07:19 PM)crazy4cs Wrote: [ -> ]jQuery is the most amusing and worst, both things.

If you understand it, you would feel like king, and if there is certain part which is not working, you would keep on pinching your hairs for days, just like I did couple of days ago.

Exactly the way I feel, especially because i'm pretty new to it. Anori seems to have pretty good knowledge as he is the one that's getting me closer to get this done, really appreciate it anori

Edit: the bar goes under some elements of the website. I'm going to try to figure this out wish me luck
Edit2: Damn it! I was sure the problem with the panel was that the search box div inside had position relative, but still not scrolling down after deleting that CSS line.

---

Seems that I found the problem with the panel

#panel {
margin-top: -149px;
}

That's making the jQuery not work properly. WOhooo now is scrolling correctly I how to figure how to make it scroll on the same position and not shift to the left.

To make the thing not jump left edit the

left: 0;