back to top
shopping basket

View your basket

Medium format transparency scanning service

What our customers are saying:

... you delivered exactly what you promised and in record time.

Read more...

Scrolling, Following Sidebar using jQuery and CSS

Scrolling, Following Sidebar using jQuery and CSS

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 19 March 2015

Were you to view any page on this website, save the homepage, on a desktop or tablet computer, you will notice some pictures pointing out other pages you might like to visit, following you down the page. This scrolling sidebar can be used for anything you like. You could add in adverts, latest tweets, even a falling man.

How to achieve this effect requires a bit of css, a bit of javascript, and a bit of html. What you will end up with is some content in a right column that sits just below the header and scrolls with you down the page until it hits the footer.

Firstly, the html...

<!DOCTYPE html>

<html lang="en">

  <head>

  </head>

  <body>

    <div class="header">

      NAV AND PRETTY HEADER TYPE STUFF

    </div>

    <div class="body-container">

      <div class="rcolumn">

        <div id="rcolumn-content">

          SCROLLING SIDEBAR CONTENT GOES HERE

        </div>

      </div>

      <div class="lcolumn">

        MAIN PAGE CONTENT

      </div>

      <div class="body-container-base">

      </div>

    </div>

    <div id="footer">

       OTHER NAV AND PRETTY FOOTER TYPE STUFF

    </div>

  </body>

</html>

Now for the JavaScript

You will first need to evoke jQuery. It is conventional to do this between the head and /head tags of the website, like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

Now for the JavaScript to make your appear where you want it to initially, before scrolling down the page. It should appear immediately after, "<div class="rcolumn">," from the html above.

<script type="text/javascript">

//<![CDATA[

$(window).load(function(){

var windw = this;

$.fn.followTo = function ( elem ) {

var $this = this,

$window = $(windw),

$bumper = $(elem),

bumperPos = $bumper.offset().top,

startingPos = $this.offset().top,

defaultPosType = $this.css('position'),

thisHeight = $this.outerHeight(),

setPosition = function(){

if ($window.scrollTop() > (bumperPos - thisHeight)) {

$this.css({

position: 'absolute',

top: (bumperPos - thisHeight)

});

} else if ($window.scrollTop() < (startingPos)) {

$this.css({

position: defaultPosType,

top: startingPos

});

} else {

$this.css({

position: 'fixed',

top: 0

});

}

};

$window.resize(function()

{

bumperPos = pos.offset().top;

thisHeight = $this.outerHeight();

setPosition();

});

$window.scroll(setPosition);

setPosition();

};

$('#rcolumn-content').followTo('#035;footer');

});//]]>

</script>

Finally, the CSS

What I've outlined below is the bare-bones css that you will need to get this working (well, with the exception of the coloured background on the header and footer). To make everything pretty, you'll have to edit it how you like. The css can be placed in between the head and /head tags of the website or in a separate css file.

.header {

  width: 100%;

  height: 60px;

  background: red;

}

.body-container {

  width: 1080px;

  margin:0 auto;

}

.rcolumn {

  width: 251px;

  float: right;

  display: block;

}

#rcolumn-content {

  width: 251px;

  height: 607px;

  padding: 12px 0 0 0;

}

.lcolumn {

  width: 799px;

  margin: 0 15px;

  float:left

}

.body-container-base {
  width: 100%;

  clear: both;

}

#footer {

  width: 100%;

  height: 60px;

  background: blue;

}

That's it!

Put it all together, with some content in the right column, and you should end up with a similar effect to that seen on our own site. Any problems, just drop me a line in the comments, and I'll get back to you as soon as I can.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more