kukiko11 kukiko11 - 1 year ago 60
HTML Question

make appear a socialbar just during the article's content height?

I'm trying to show the famous 'social bar' of my blog with this code but only works with the screen height

if($(this).scrollTop()>650 && $(this).scrollTop()<1500 ){



'social' is the class of the div that I want to show just while the article's content is on the screen, I need that once of posts' content is not on screen, the social bar just disappear

here are the "containers" that I use either for the article's content or the social bar 'share options'

article's content:

<div class="postcontent">
<p> <?php echo $content; ?></p>

social bar:

<div class="social">
//'the bar share options'

To further explain, let's suppose I have two divs, the first one has the article's content or message, the second one is the social bar. I just want to show the second one while the first one is being showed on the screen, then... when the screen top exceeds the first div's height, I want to hide the second div that I was showing previously, i mean the social bar... it's just like I need to show a share bar only while the user reads the content and after the article's content, the bar disappear I mean at the end, when there's no more content to read...

Answer Source
vhHeight = $(window).height() / 100; //As JS cant get 100%, we'll divide viewport height into 100 units. So that we gonna calculate our distance.

//This gives our trigger point a distance from top. 10% for example. Trigger point could be any element. I made this, but it can be changed for any element in your code
        if($(this).scrollTop() >= $('.triggShow').offset().top  - vhHeight * 10)  {
//This says "if user goes above post content, hide social again.
//This says "If user has been finished the post content, hide social too
  if($(this).scrollTop() >= $('.triggHide').offset().top - vhHeight * 90) {

I'll add this Fiddle and here you will see how does trigger points work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download