Sticky sidebar for wordpress blog using only CSS?
Question
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
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!
2 answers
solution1
2 2015-06-25 02:18:04
I think that if you require jQuery you could look at this answer: Fix object to top of browser window when scrolling
You will need to import the jquery library into the <head></head> of your website using:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
solution2
1 ACCPTED 2015-06-25 03:04:29
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.