Forum Link:
http://destinyboard.net
I am trying to make it so when I scroll the page down, the Postbit Author scrolls with the screen alongside the post. I am trying to implement it using the Position: sticky, but am not having luck with it. Here is a picture of what I'm talking about:
![[Image: Screen_Shot_2017_05_14_at_9_35_29_PM.png]](https://camo.mybb.com/a9e664d21a345d5228dd78f62e3044d849c687e7/68747470733a2f2f707265766965772e6962622e636f2f6658714742512f53637265656e5f53686f745f323031375f30355f31345f61745f395f33355f32395f504d2e706e67)
Essentially, as I scroll down, if it's a large post, I want the postbit author to scroll with it. And then stop once I am at the bottom of the post, if that makes sense. Here is my current code:
postbit_classic
<div class="sticky">
<div class="post_author scaleimages">
{$post['useravatar']}
<div class="author_information">
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
{$post['usertitle']}<br />
{$post['userstars']}
{$post['groupimage']}
</div>
<div class="author_statistics">
{$post['user_details']}
</div>
</div>
</div>
CSS
.sticky {
position: -webdev-sticky;
position: sticky;
top:0;
}
I am having zero luck with this.
(2017-05-15, 02:06 AM)Flawless Wrote: [ -> ] (2017-05-15, 02:00 AM)Ashley1 Wrote: [ -> ]Why would you expect it to work...the expected values of position property are:
https://www.w3schools.com/cssref/pr_class_position.asp
Isn't position: sticky an actual value?
https://webdesign.tutsplus.com/tutorials...-cms-24042
Which browser are you using to test? it does say there:
If you are viewing these demos in Chrome, Opera, or Internet Explorer (and Blink), you will have realised by now that they don’t work. These browsers do not yet support the
sticky
value.
Anyway you can also try adding your class to the post_author div to see if that makes a difference, so that you have:
<div class="post_author sticky scaleimages">
(2017-05-15, 02:18 AM)Ashley1 Wrote: [ -> ] (2017-05-15, 02:06 AM)Flawless Wrote: [ -> ] (2017-05-15, 02:00 AM)Ashley1 Wrote: [ -> ]Why would you expect it to work...the expected values of position property are:
https://www.w3schools.com/cssref/pr_class_position.asp
Isn't position: sticky an actual value?
https://webdesign.tutsplus.com/tutorials...-cms-24042
Which browser are you using to test? it does say there:
If you are viewing these demos in Chrome, Opera, or Internet Explorer (and Blink), you will have realised by now that they don’t work. These browsers do not yet support the
sticky
value.
Anyway you can also try adding your class to the post_author div to see if that makes a difference, so that you have:
<div class="post_author sticky scaleimages">
Chrome was recently added so it can use the sticky. Anyways, I tried adding the class to the div and it didn't make a difference either.
(2017-05-15, 02:23 AM)Rōshi Wrote: [ -> ] (2017-05-15, 02:06 AM)Flawless Wrote: [ -> ] (2017-05-15, 02:00 AM)Ashley1 Wrote: [ -> ]Why would you expect it to work...the expected values of position property are:
https://www.w3schools.com/cssref/pr_class_position.asp
Isn't position: sticky an actual value?
https://webdesign.tutsplus.com/tutorials...-cms-24042
Yes, since Chrome 56 (again). Keep in mind that IE, Edge and Opera still doesn't support the sticky value though.
I faced the same problem a couple months ago; you have to remove "overflow: hidden" from
.post {
overflow: hidden;
}
and -webkit-sticky isn't necessary
https://developers.google.com/web/update...ion-sticky
Thank you for the input, it now scrolls down. The only issue I have now is that it doesn't stop at the base of the post. It goes right passed it, any ideas on that? As you can see, it scrolls over the postbit buttons, how do I stop it above them?
![[Image: Screen_Shot_2017_05_14_at_10_56_31_PM.png]](https://camo.mybb.com/affdcb13143febe224b16a0827ff066c82b7dae2/68747470733a2f2f696d6167652e6962622e636f2f6668617a57512f53637265656e5f53686f745f323031375f30355f31345f61745f31305f35365f33315f504d2e706e67)
(2017-05-15, 03:22 AM)Rōshi Wrote: [ -> ] (2017-05-15, 02:28 AM)Flawless Wrote: [ -> ] (2017-05-15, 02:23 AM)Rōshi Wrote: [ -> ] (2017-05-15, 02:06 AM)Flawless Wrote: [ -> ] (2017-05-15, 02:00 AM)Ashley1 Wrote: [ -> ]Why would you expect it to work...the expected values of position property are:
https://www.w3schools.com/cssref/pr_class_position.asp
Isn't position: sticky an actual value?
https://webdesign.tutsplus.com/tutorials...-cms-24042
Yes, since Chrome 56 (again). Keep in mind that IE, Edge and Opera still doesn't support the sticky value though.
I faced the same problem a couple months ago; you have to remove "overflow: hidden" from
.post {
overflow: hidden;
}
and -webkit-sticky isn't necessary
https://developers.google.com/web/update...ion-sticky
Thank you for the input, it now scrolls down. The only issue I have now is that it doesn't stop at the base of the post. It goes right passed it, any ideas on that? As you can see, it scrolls over the postbit buttons, how do I stop it above them?
The easy but lazy method would be to simply add a margin to the .post.classic .post_author class, something like:
Quote:.post.classic .post_author {
float: left;
width: 15%;
border: 0;
padding: 5px 1%;
margin-bottom: 45px;
}
Thank you very much for your help. Problem solved!