Place the sidebar in a fixed position using JavaScript, automatically track it, and try again

Hello, this is naouniverse ( @naouniverse708 ).

Article on 2013/09/05 23:40,

I tried placing the sidebar etc. in a fixed position and automatically tracking it.

I tried automatic tracking of the sidebar, but there were many problems.

Specifically, depending on the window size, the sidebar may slide sideways or cover the footer.

I decided this wasn't going to work, so I tried again.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(jQuery) { var pursue = jQuery("#pursue"); /* 固定したいものを指定 */ var offset = pursue.offset(); var stopslip; /* 横スベリ防止 */ var content = jQuery("#content"); var sidebar = jQuery("#sidebar"); var win = jQuery(window); var footer = jQuery("#footer").height()+70; var min_width = 1000; jQuery(window).scroll(function () { if(content.height() > sidebar.height() && win.scrollTop()+win.height() >= offset.top+pursue.height()+footer){ if (win.width() >= min_width){ stopslip = win.width()/2+200; pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } else if(win.width() < min_width) { stopslip = 700-win.scrollLeft(); pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } } else { pursue.css({ position:'static' }); } }); jQuery(window).resize(function () { if(content.height() > sidebar.height() && win.scrollTop()+win.height() >= offset.top+pursue.height()+footer){ if (win.width() >= min_width){ stopslip = win.width()/2+200; pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } else if(win.width() < min_width) { stopslip = 700-win.scrollLeft(); pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } } else { pursue.css({ position:'static' }); } }); }); </script>

.resize() performs the same processing not only for window scrolling but also for resizing.

The conditions for placing the sidebar in a fixed position and automatically tracking it are as follows:

• If the vertical length of the article is longer than the sidebar, and the vertical scroll length + window vertical length exceeds the initial fixed part position + footer length

That's what it feels like.
and,

1. If the window width is 1000px or more
2. If the window width is less than 1000px

And each one is processed differently.
1000px is

var min_width = 1000;

This is the distance from the left edge of the article to the right edge of the sidebar.

The different part of the process is the stopslip part.
Different values ​​are assigned to stopslip depending on the width of the window.

In case of 1.

//200px right from the middle of the window stopslip = win.width()/2+200;

In case 2.

//Subtract horizontal scroll from 700px (horizontal length of article) stopslip = 700-win.scrollLeft();

It might be a good idea to declare variables separately for the 200px and 700px parts, calculate the numerical values, and assign them.

And this time, the fixed position of the sidebar is based on the bottom.
This reduces the amount of white space in the sidebar.

bottom:footer,

The footer is

var footer = jQuery("#footer").height()+70;

I adjusted it appropriately so that it doesn't overlap the footer.

Well, it looks like this, but maybe I can make it a little more refreshing...