[RESOLVED] Emulating this jquery code in javascript

**jimmyoneshot** · 01-14-2012 10:13 AM

I want to be able to emulate the effect that google has used on their search results screen whereby the results are shown on the left and the user can click a button on each result to show a preview of that result on the right.

The thing is as the user scrolls the page the right hand result preview panel is constantly anchored to the top and bottom of the browser window. Also when the window resizes the panel stays anchored and resizes too. Obviously this cannot be done with css alone as the page itself needs to be scrollable so the user can scroll the results whilst this preview panel needs to remain anchored to the page height so I assumed javascript/jquery was required.

I found somewhat of a solution in jquery format:-

"The trick is that you have to set it as position:fixed, but only after the user has scrolled past it.

This is done with something like this, attaching a handler to the window.scroll event

Code:

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div');

   var elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        var windowTop = $window.scrollTop();

        $stickyEl.toggleClass('sticky', windowTop > elTop);
    });

This simply adds a sticky CSS class when the page has scrolled past it, and removes the class when it's back up.

And the CSS class looks like this

Code:

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

"

However I want to achieve this in javascript alone. Can anyone help me with this please?

**xelawho** · 01-14-2012 12:02 PM

I'm a little confused - can you explain again why you can't just do it with css?

Code:

<html>
<head>
<style>
#thediv{
position:fixed;
border:solid;
height:95%
}
body{
height:100%}
#content{
float:right}
#thediv{
float:left}


</style>
</head>
<body>
<div id="thediv"> Sticky div</div>

<div id="content"> Scrollable content
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>

**jimmyoneshot** · 01-15-2012 01:31 PM

Thanks xelawho. I think I've seen an example almost identical to that before. The difference is I need the whole window/body to be scrollable not the content div itself.

So basically this "preview div" I'm trying to implement needs to be the size of the "viewport" itself. In javascript it seems to be referred to as window.innerHeight which I think I'll need to create a function for now in javascript.

The best examples I can think of are as I mentioned, Googles search results preview panel and facebook new right hand side chat panel which seems to have it's height updated via javascript as the browser window resizes.

Thanks for the help. I'll keep trying and let you know how it goes.

Thread: [RESOLVED] Emulating this jquery code in javascript

Thread Tools

Display

[RESOLVED] Emulating this jquery code in javascript

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions