Sticky sidebar

donboe · June 11, 2018, 8:00am

I am/was in search for a sticky sidebar when I found this one

What I liked about this plugin, when I read it, is that it is related to the parent and that is exactly what I need it, only I do not get it working :(. I load the plugin after jQuery, which is required at the bottom of the page, then I call the function i.e.
HEAD

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/stickySidebar.js"></script>

HTML

<div class="row">
    <div class="col-md-6 pl-0">
        <h2><i class="fa fa-comment" aria-hidden="true"></i>&nbsp;Comments&nbsp;<span class="commentCounter">0</span></h2>
        <div id="comment-list" class="comment-list" data-counter="<?= (int)$counter['counter'];?>">
			<?= $comments;?>
        </div>
    </div>
	<div class="col-md-4 ml-auto pr-0" id="sidebar">
        <h2><i class="fa fa-pencil" aria-hidden="true"></i>&nbsp;Leave a comment</h2>
        <div id="form-alert" role="alert"></div>
        <form id="comment-form" class="form-horizontal" role="form" action="/insert_comment" method="post">
            <input name="post_id" type="hidden" id="post_id" value="<?= $blog_post['post_id']; ?>">
            <div class="input-group">
                <input type="text" name="name" class="form-control" id="name" placeholder="Your name">
            </div>
            <div class="input-group mt-4">
                <textarea name="comment" placeholder="Leave your comment..." id="comment" class="form-control" rows="6"></textarea>
            </div>
            <div class="input-group mt-4">
                <button class="btn btn-medium btn-cta" name="submit" type="submit" id="submit">Leave a Comment</button>
            </div>                                
        </form>
    </div>
</div>

<script>
(function() {
$("#sidebar").stick_in_parent();
});
</script>

But I can’t get it to work. I get no error reports in dev tools. I use another sticky plugin so I thought it might have to do with it, so I temporarily removed it from the page but that had no influence. Does anyone have an idea how this can happen or does someone know how I can do this differently.

thank you in advance

PaulOB · June 11, 2018, 2:07pm

I assume you are using bootstrap4 and that sidebar is a flex item which will automatically match the height of its neighbour. Therefore it is already at the toip and the bottom at the same time so there is nothing that can be made sticky as such.

You need the sidebar as an inner element in the flex-item.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*
 Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);


</script>
<style>
.row {
	position:relative;
}
#sidebar {
	background:red;
}
</style>
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-md-6 pl-0">
      <h2><i class="fa fa-comment" aria-hidden="true"></i>&nbsp;Comments&nbsp;<span class="commentCounter">0</span></h2>
      <div id="comment-list" class="comment-list" data-counter="<?= (int)$counter['counter'];?>">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="col-md-4 ml-auto pr-0">
      <div id="sidebar">
        <h2><i class="fa fa-pencil" aria-hidden="true"></i>&nbsp;Leave a comment</h2>
        <div id="form-alert" role="alert"></div>
        <form id="comment-form" class="form-horizontal" role="form" action="/insert_comment" method="post">
          <input name="post_id" type="hidden" id="post_id" value="<?= $blog_post['post_id']; ?>">
          <div class="input-group">
            <input type="text" name="name" class="form-control" id="name" placeholder="Your name">
          </div>
          <div class="input-group mt-4">
            <textarea name="comment" placeholder="Leave your comment..." id="comment" class="form-control" rows="6"></textarea>
          </div>
          <div class="input-group mt-4">
            <button class="btn btn-medium btn-cta" name="submit" type="submit" id="submit">Leave a Comment</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<script>
$("#sidebar").stick_in_parent();
</script>
</body>
</html>

I’m guessing that script is pre-flexbox days.

If you just want modern browsers support (not IE11) then just use CSS position:sticky and no js required.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.row {
	position:relative;
}
#sidebar {
	background:red;
	position:-webkit-sticky;
	position:sticky;
	top:0;
}
</style>
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-md-6 pl-0">
      <h2><i class="fa fa-comment" aria-hidden="true"></i>&nbsp;Comments&nbsp;<span class="commentCounter">0</span></h2>
      <div id="comment-list" class="comment-list" data-counter="<?= (int)$counter['counter'];?>">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="col-md-4 ml-auto pr-0">
      <div id="sidebar">
        <h2><i class="fa fa-pencil" aria-hidden="true"></i>&nbsp;Leave a comment</h2>
        <div id="form-alert" role="alert"></div>
        <form id="comment-form" class="form-horizontal" role="form" action="/insert_comment" method="post">
          <input name="post_id" type="hidden" id="post_id" value="<?= $blog_post['post_id']; ?>">
          <div class="input-group">
            <input type="text" name="name" class="form-control" id="name" placeholder="Your name">
          </div>
          <div class="input-group mt-4">
            <textarea name="comment" placeholder="Leave your comment..." id="comment" class="form-control" rows="6"></textarea>
          </div>
          <div class="input-group mt-4">
            <button class="btn btn-medium btn-cta" name="submit" type="submit" id="submit">Leave a Comment</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</body>
</html>

donboe · June 11, 2018, 3:40pm

@PaulOB Thanks a lot Paul. making it an inner div indeed made it work. But be able to doing it without using JS is even greater. I did not even know it was possible without using JS. I have a last question if you don’t mind. First the sidebar was only available in a certain part of that particular section. For practical reasons, I was forced to move the sidebar over the entire height of that section. Would this be the right way of doing that?

<div class="main-content blog-content bg-blue">
    <div class="container-fluid">
		<div class="row">
			<div class="col-md-6">
				<div class="row no-gutters">
					<div class="col-md-12 post-content">
					
					</div>
					<div class="col-md-12 post-comments">
					
					</div>					
				</div>
			</div>
			<div class="col-md-5 ml-auto">
				<div id="sidebar">
				
				</div>
			</div>
		</div>
    </div>
</div>

Thank you in advance

PaulOB · June 11, 2018, 4:28pm

That structure looks the same except that you sub-divided the left column so it shouldn’t make any difference that I can see.

Did you try it?

donboe · June 12, 2018, 6:41am

@PaulOB That works great. Thanks a lot, and the stick part. So simple. I have banging my head against the wall trying to solve this and then with just 2 lines of css it is working… Can I ask one last question. First off all did I bring the container-fluid back to container.

<div class="main-content blog-content bg-blue">
    <div class="container">
		<div class="row">
			<div class="col-md-6 col-content">
                <?php require_once "icon_bar.html"; ?>
				<div class="row no-gutters">
					<div class="col-md-12 post-content">
					</div>
					<div class="col-md-12 post-comments">
					</div>					
				</div>
			</div>
			<div class="col-md-5 ml-auto col-form">
				<div id="sidebar">
				</div>
			</div>
		</div>
    </div>
</div>

Now I actually would like to have social share icons bar on the left `side (within col-content), with the same behavior as the sidebar,

<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> 
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> 
  <a href="#" class="google"><i class="fa fa-google"></i></a> 
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> 
</div>

But I don’t want to compromise on the available space so actually this div should fall outside the parent col-content. So my question is, is this possible and if so, how should I address this. Or do you suggest another approach?

thanks in advance

Edit: I found a sollution. I placed the icon_bar straight in div blog-content

HTML

<div class="main-content blog-content bg-white">
    <?php require_once "icon_bar.html"; ?>
    <div class="container">
    // rest of existing content

CSS

.blog-content 
{
	padding: 4rem;
	position: relative;
}

.icon-bar-container
{
	position: absolute;
	top: 4rem !important;
	left: 0 !important;
	bottom: 4rem !important;		
}
.icon-bar {
	position:-webkit-sticky;
	position:sticky;
	top: 5rem;
	left: 0;
}

PaulOB · June 12, 2018, 3:08pm

Glad you sorted it

system · September 11, 2018, 10:08pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.