This code achieves the effect, but is it a resource friendly way of doing it?

Just to clarify: target div.fixMe and fix it to the top of the window when the user scrolls past its natural position. (I do realise there are plugins to achieve this result, but I wanted to build it myself)

Is this the best way to achieve the desired result? Is it a good idea that the whole function triggers whenever the user scrolls, or should I be splitting up code?

(function() {
var fixedElement = $('.fixMe').offset(),
    scrolled = $(window).scroll(function() {
        var winScrolled = $(this).scrollTop();
        if(winScrolled > fixedElement.top - 10) {
            $('.fixMe').css({'position': 'fixed','top' : '10px'})
        else {
            $('.fixMe').css({'position': 'static'})

Any feedback/criticism is welcome. I should probably get/set the width of div.fixMe to avoid display issues.


2 Answers 2


Two things I noticed/would recommend:

  1. Cache jQuery variables such as $(this) and $('.fixMe') to prevent redundant lookups during each scroll event.
  2. Implement an event debouncer/limiter, this is because the scroll event fires a lot more than you likely think it does. There are many utils/plugins to achieve this such as:

I even wrote a very simple one: http://limit.gotsomething.com/. My site will show you why debouncing/limiting is useful.

Other than that looks good to me!

cheers, Marc.

  • \$\begingroup\$ Thanks Marc. While only recently making a concerted effort to learn JQuery I was conscious of many events firing. However if a project is of this scale, do I need to worry about this? \$\endgroup\$
    – NickSheehy
    Commented May 2, 2012 at 12:59
  • \$\begingroup\$ In reality your code does so little that there isn't a great need to deal with these performance enhancements. Just keep them in mind when you are triggering events or functions a lot and when the result if large iterations or heavy DOM manipulation. \$\endgroup\$
    – Marc Gagne
    Commented May 2, 2012 at 15:08
  • \$\begingroup\$ Caching $('.fixme') outside of the scroll event will be noticeable on IE at least. In IE7 on a decent sized page I think you might have trouble even scrolling the page by doing that lookup in the scroll event. \$\endgroup\$
    – Bill Barry
    Commented May 2, 2012 at 15:54

Here is my code for this:

clone <div> element when original element reach the top of window on page-scroll.

function divFloater(div){
    var win = $(window);
    var divTop = div.offset().top;
    var divLeft = div.offset().left;

        var has_fixed = div.children('div').hasClass('fixed');
        var winTop = win.scrollTop();
        if ((winTop > divTop) && !has_fixed){            
        } else if ((winTop <= divTop)){
//        console.log(winTop+'|'+divTop'|'+has_fixed+);

    var floating_div=$('.view-aktualis-palyazatok').children('.view-header');

CSS code for this

.view-header {
.view-header.fixed {
    top: 0;

sandbox: http://jsfiddle.net/eapo/Djf3E/1/

Please feel free to catch bugs, and advices are welcome.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.