Position Sticky Postbit Author

[Flawless]

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:



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.

[Ashley1]

Why would you expect it to work...the expected values of position property are:

https://www.w3schools.com/cssref/pr_class_position.asp

[Flawless]

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

[Ashley1]

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">

[Flawless]

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.

[m0ckingbird]

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

[Flawless]

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?

[m0ckingbird]

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:

.post.classic .post_author {
    float: left;
    width: 15%;
    border: 0;
    padding: 5px 1%;
    margin-bottom: 45px;
}

[Flawless]

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:

.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!