Recently, I had a thought about the Disqus loading. Instead of loading by a button, automatically loading when comments section (about) comes into view might be a nice idea. But I dropped the idea as I thought about my browsing behavior, most of time, I would scroll down to the bottom of page. If so, simply loading the Disqus is a better method in my opinion.
Anyway, I still made a quick sample code:
The important part is the detection:
You can do many things with such detection, such as infinite scroll (which I don't like), loading images or external resources, or loading Disqus comments to reduce bloating.
This only demonstrates the Y-axis and trigger-from-above detection. In practice, it should only be triggered once if the state has not reverted back. It's not hard to do, only I don't need it, so the post ends here.
Anyway, I still made a quick sample code:
The important part is the detection:
if ($w.scrollTop() + $w.height() >= $t.offset().top - $w.height()) {
inview = true;
}$w = $(window) and $t = $('#target'). When the bottom of view area reaches target's top with a margin $w.height(), then it's detected. Much like sticking an element at top, this is as simple as that, nothing much to explain. You can do many things with such detection, such as infinite scroll (which I don't like), loading images or external resources, or loading Disqus comments to reduce bloating.
This only demonstrates the Y-axis and trigger-from-above detection. In practice, it should only be triggered once if the state has not reverted back. It's not hard to do, only I don't need it, so the post ends here.
0 comments:
Post a Comment