Tech News Stop - Sharing by Wasim Akhtar

Facebook Style Scroll Fixed Header in JQuery

While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.

Now for this, there are number of jQuery plugins available out there! But in our case we weren't allowed to add any new plugins to the technology stack of application (I know it sucks :-( ). So here is a small JQuery based solution to make a DIV of header fixed on top of the screen while scrolling.

Related: Mouse Scroll Events in JQuery

The HTML

Below is the HTML code. It contain a simple div #header which we want to freeze at the top. Note that we have included JQuery directly from jquery.com site (In my application we have included older version of jquery from out tech stack).

?

   <HTML>
   <HEAD>
       <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
       <title>Scroll Fixed Header like Facebook in JQuery - viralpatel.net</title>
   </HEAD>
   <BODY>
    
   <div id="header">
       <h1>Scroll Fix Header like Facebook in JQuery</h1>
   </div>
    
   <p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
   <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
   <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
   <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    
   </BODY>
   </HTML>

In above HTML, we added few lines "Some dumb text to add…" just to make page scrollable.

The JQuery

The JQuery code is pretty straight forward. Take a look:

?

   <SCRIPT>
   $(document).ready(function() {
    
       var div = $('#header');
       var start = $(div).offset().top;
    
       $.event.add(window, "scroll", function() {
           var p = $(window).scrollTop();
           $(div).css('position',((p)>start) ? 'fixed' : 'static');
           $(div).css('top',((p)>start) ? '0px' : '');
       });
    
   });
   </SCRIPT>

We have added an event listener to "scroll" event. This handler function gets called each time scroll event is fired in browser.

Now we select the header element (highlighted in above code) and simply do some position stuff. We make the header div's position fixed of static depending upon the state of scroll position. Also the topattribute is set to 0px in case we want to make it fix, when page is scrolled down.

Online Demo

Demo Download

--
Wasim Akhtar

Wordle Link

    <a href="http://www.wordle.net/show/wrdl/4617357/Untitled"            title="Wordle: Untitled"><img           src="http://www.wordle.net/thumb/wrdl/4617357/Untitled"           alt="Wordle: Untitled"           style="padding:4px;border:1px solid #ddd"></a>

--
Wasim Akhtar

Download uTorrent 3.1 RC5

µTorrent is a small and incredibly popular BitTorrent client.
Micro-Sized Yet Feature Filled

Most of the features present in other BitTorrent clients are present in µTorrent, including bandwidth prioritization, scheduling, RSS auto-downloading and Mainline DHT (compatible with BitComet). Additionally, µTorrent supports the Protocol Encryption joint specification (compatible with Azureus 2.4.0.0 and above, BitComet 0.63 and above) and peer exchange.

Resource-Friendly

µTorrent was written with efficiency in mind. Unlike many torrent clients, it does not hog valuable system resources - typically using less than 6MB of memory, allowing you to use the computer as if it weren't there at all. Additionally, the program itself is contained within a single executable less than 1 MB in size.

Skinnable and Localized

Various icon, toolbar graphic and status icon replacements are available, and creating your own is very simple. µTorrent also has support for localization, and with a language file present, will automatically switch to your system language. If your language isn't available, you can easily add your own, or edit other existing translations to improve them!

Actively Developed and Improved

The developer puts in a lot of time working on features and making things more user-friendly. Releases only come out when they're ready, with no schedule pressures, so the few bugs that appear are quickly addressed and fixed.
Download uTorrent 3.1 RC5 - FileHippo.com:

'via Blog this'