How can I display a div element only when a specific element is in view?

If you want a certain element to be visible only when another element appears during scrolling, the following code can be helpful.

var p = $( ".passedMe" ); //Element that appears
var offset = p.offset();
offset = offset.top;

$(window).scroll(function () {  
    if ($(window).scrollTop()   >  offset ) {
       $('.showHide').fadeIn(); //Element that should become visible
    }
  else { $('.showHide').fadeOut(); }
});