The code we create here can be placed in a plugin or in a child theme to extend the Twenty Sixteen functionality. I would not advise you to put that code in the functions.php of the original Twenty Sixteen because it will get removed on each update.
We will check for the allowed post types where that meta data will be fixed.
With the filter
allowed_types_for_fixed_metadata you can add as many types as you want in there. This can be useful if you have a post type that follows the same layout as a post.
Sidebar and Basic Variables
We will now get the meta data sidebar of Twenty Sixteen and also start some basic variables that will be used for positioning our sidebar.
wWidth contains our window width. We don’t want to have a fixed meta data sidebar below
985px because Twenty Sixteen is pushing that sidebar to the bottom on that width. We are also checking if that sidebar exists. There is no point in creating a scrolling event if there is nothing to be fixed.
The comments in the code should suffice for you to understand what is going on there. Basically, we are just getting the height of our sidebar and article and use them to create are starting position and ending position.
Starting position is the point where the sidebar will start to be fixed while scrolling and the ending position is the point where the sidebar will stop scrolling. The end position must be calculated in that way to remove the height of the sidebar because we want the bottom of our sidebar to stop.
Here is some math for that:
Sidebar Height = 200px Article Height = 400px Start Position = 100px (from top) End Position = N/A End Position = Start Position + Article Height = 500px Our sidebar top position will stop at 500px thus going below article for additional 200px (sidebar height) End Position = Start Position + Article Height - Sidebar Height = 300px Our sidebar top position will stop at 300px, thus going down for additional 200px and making it end right where the article ends
Some additional pixels where added to acknowledge margins, title height and other. You can always look up the margins, paddings and other heights that can be of importance when creating something like this. Those will be the starting calculations. After that, change those values a little to tune the scroll effect to your own liking.
Scrolling our Post Meta Data
We will have to add a scrolling function that will look for our scrolling position and then choose what to do with our Post Meta Data.
First we are checking the window width. If it is below a certain width, we will not scroll our Post Meta Data. After that we are getting our scroll position in pixels.
If our current scroll position passed the starting position and did not pass the ending position, we will scroll our Post Meta Data.
Here is the math for that:
Our current scrolling position: 400px The starting position: 100px TopPosition = Current - Starting = 300px 300px is the number we have to apply to our sidebar to make it fixed in our reader's eye
Additional pixels are there because of the title and margins. Twenty Sixteen also has a border around it, so we had to acknowledge that height also.
We are also giving our Post Meta Data an
Getting our Post Meta Data back
We must also take into account the scenario when we scroll back to top and we pass our starting position. In that scenario we have to give our Post Meta Data the
static position so it returns to its original position.
We used the position
absolute here, but I would advise you also to try it with the
fixed position. You could have to make some adjustments to the code such as giving the exact scrolling position to our Post Meta Data and removing the calculations.