Geek Answers Handbook

How to make a floating sidebar like envato?

I really like the floating panel on the left side of the following site:

http://envato.com/

I have no idea how to name it, but I like how when you click the search button it expands to the search page, you click on another icon and expand with what appears as its own page.

How to do it? Is there any tutorial where html5, javascript or jQuery is used?

NOTE. All answers so far cover only the floating bar, but not clicking on the link on this floating bar to show the window expanded to the right.

+4
source share
5 answers
<div id="float"></div> #float{ position:fixed; top:50px; left:0; }

Check out the working example http://jsfiddle.net/TVwAv/

+10
source

executed using css,

HTML

 <div id="floating_sidebar"> whatever you want to put here </div>

CSS

 #floating_sidebar { position:fixed; left: 0; top: 100px; /* change to adjust height from the top of the page */ }
+4
source


I use this for a "sticky" menu.
What I added:

1. so that my "footer" always "scrolls" down, if the sidemenu is a little high, if necessary, I scroll only the scroll, i.e. when content is above the sidebar.
2. I found the animation effect a bit "jumping" to my taste, so I just changed the css through jquery. of course, you put 0 at the animation moment, but the animation is still happening, so it uses cleaner and faster css.
3.100 - the height of my header. you can assume that this is the “threshold” of when to scroll.

  $(window).scroll(function(){ if ($('#sidebar').height() < $('#content').height()) { if ($(this).scrollTop() > 90) $('#sidebar').css({"margin-top": ($(this).scrollTop()) - 100 }); //$('#sidebar').animate({"marginTop": ($(this).scrollTop()) - 100 }, 0); else $('#sidebar').css({"margin-top": ($(this).scrollTop()) }); //$('#sidebar').animate({"marginTop": ($(this).scrollTop()) }, 0); } });`
+4
source

you can use this.

your html div is here

 <div id="scrolling_div">Your text here</div>

And you are using javascript function

 $(window).scroll(function(){ $('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"}); });

You can also use css for this

 #scrolling_div { position:absolute; left: 0; top: 100px; }

I did not test it, but I hope it worked.

0
source

I know this looks like a pretty big piece of code, however this function just works by specifying three simple options; your floating "top", your "target" (floater) and the "reference" element to set the borders, it also automatically takes care of the upper and lower positions, css is not involved.

 function scrollFloater(marginTop, reference, target, fixWhidth = false){ var processScroll = function(){ var from = reference.offset().top - marginTop; var to = reference.offset().top + reference.outerHeight() + marginTop - target.outerHeight(); var scrollTop = $(this).scrollTop(); var bottom = to - reference.offset().top + marginTop; if( fixWhidth ) target.css('width', target.width()); if( scrollTop > from && scrollTop < to ) target.css('position', 'fixed').css('top',marginTop); else if( scrollTop >= to ) target.css('position', 'absolute').css('top', bottom); else target.css('position', '').css('top',marginTop); } $(window).scroll(function(){ processScroll(); }); processScroll(); }

And here is how you use it:

 $(function() { scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true); });

I hope this helps someone.

0
source

More articles:


All Articles