kukiko11 kukiko11 - 6 months ago 15
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

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

$('.social').show('slow');
}else{
$('.social').hide('slow');

}


'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>
</div>


social bar:

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


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
    $(document).scroll(function(){
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)  {
            $(".social").show();
        }
  else{
//This says "if user goes above post content, hide social again.
    $(".social").hide();
  }
//This says "If user has been finished the post content, hide social too
  if($(this).scrollTop() >= $('.triggHide').offset().top - vhHeight * 90) {
    $(".social").hide();
  }
    });

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