Sticky sidebar for wordpress blog using only CSS?

0 Views

I am trying to style the sidebar in my wordpress blog to scroll until it hits the bottom of the widget area, then becomes fixed so that it will always be visible as the body content continues to scroll.

Examples: ‘Top Stories Sidebar’ https://news.google.com/ – ‘Mo Map Sidebar’ http://www.yelp.com/search?find_desc=restaurants&find_loc=San+Francisco%2C+CA&ns=1

Read More

The problem is, ‘position: sticky;’ is not supported on a few major browsers so I would like to avoid using it. Is there an alternative method of doing this using only CSS? I haven’t started learning javascript yet, but am willing to start sooner than planned if someone can point me in the direction of where to start learning it for this desired effect.

Thanks in advance!

Post Views: 0

Related posts

2 comments

  2. Is a chasing sidebar acceptable? I know you don’t know much about javascript let alone jquery, so I’ll walk you through it (used to be a teacher).

    // the beginning part is just like css. To find something,
//   |  |  /         use CSS and wrap it $('inside here')
//  / / /
$('#superdiv').slideDown(800); //  <----- slide down command, 
//                                 set with 800 millisecond duration


//  certain words have a special meaning in javascript, 
//       so we add '$' to the front to avoid errors

// this variable is captured / with css and stored as '$sidebar'
      var $sidebar = $("#superdiv"),
  $window = $(window),
  offset = $sidebar.offset(); // this gets the distance from our 
                              // sidebar to the top of the screen

$window.scroll(function() {
  if ($window.scrollTop() > offset.top) {  // if there is more space 
                                          // than the distance scrolled
    $sidebar.stop().animate({  // stop the sidebar if it is moving, 
                               // then start animation
      marginTop: $window.scrollTop() - offset.top   // slowly move the 
                                        // sidebar to the new location
    });
  } else {
    $sidebar.stop().animate({  // otherwise stop the animation and 
      marginTop: 0             // bring the sidebar back to the top
    });
  }
});
    body {
  background-color: lightblue;
  border: 0;
  margin: 0;
  padding: 0;
}
#superdiv {
  background-color: orange;
  position: absolute;
  left: 0px;
  width: 150px;
  padding: 10px;
  display: none;
}
#superpage {
  padding: 10px;
}
#masterdiv {
  padding-left: 170px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
  <div id="superdiv">This is your sidebar.
    <br>
    <br>
    <br>
    <br>
    <br>Your menu items
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
  <div id="superpage">Here's the page
    <br>
    <br>
    <br>
    <br>
    <br>1
    <br>
    <br>
    <br>
    <br>2
    <br>
    <br>
    <br>
    <br>3
    <br>
    <br>
    <br>
    <br>4
    <br>
    <br>
    <br>
    <br>5
    <br>
    <br>
    <br>
    <br>6
    <br>
    <br>
    <br>
    <br>7
    <br>
    <br>
    <br>
    <br>8
    <br>
    <br>
    <br>
    <br>9
    <br>
    <br>
    <br>
    <br>10
    <br>
    <br>
    <br>
    <br>11
    <br>
    <br>
    <br>
    <br>12
    <br>
    <br>
    <br>
    <br>13
    <br>
    <br>
    <br>
    <br>14
    <br>
    <br>
    <br>
    <br>15
    <br>
    <br>
    <br>
    <br>16</div>
</div>

Comments are closed.