Jump to content
BartoHH

How to add a "sticky bar" in listing detail page

Recommended Posts

BartoHH

Hey,

 

I did a lot of custom work on JReviews for my page https://www.beraterempfehlung.de

 

I want to tell you how to set up a sticky bar that is displayed only after scrolling the page. You will find the JS, HTML and CSS files attached.

 

Maybe you can use them for your site. 

 

Visit https://www.beraterempfehlung.de/versicherungen/makler/172-max-musterberaterto see this in action.

 

Or see this screenshot:

 

 

 

Regards,

Barto

 

JS (insert it an the end of the code to detail.thtml or detail_tabs.thtml)

<script>
(function($) {

$('#stickbar').fadeOut({ scrollTop: 0 }, 639);


$(window).scroll(function() {
	
    if ($(this).scrollTop() > 640) {
		 $('#stickbar').fadeIn();
		 }
    else
     {
      $('#stickbar').fadeOut();
     }
});
}(jQuery));
</script>

PHP (insert it an the end of the code to detail.thtml or detail_tabs.thtml)

            <div id="stickbar" class="jr-page stickbar">

<div class="jrCol3 jrLeft abc">
<?php echo $this->element('listing_detail_media',array('position'=>'top','mainMedia'=>$mainMedia));?>
        
</div>

<div class="jrCol1 jrLeft def"><h3>
<?php echo $snippetsTitle; ?><?php echo $this->action == 'detail' ? $Routes->content($listing['Listing']['title'],$listing) : ($Text->truncate($listing['Listing']['title'],42));?>
<?php $Jreviews->listingStatusLabels($listing);?></h3>

<h5>
<span><?php echo $CustomFields->field('jr_tatigkeit',$listing); ?> </span> | <span><?php echo $CustomFields->field('jr_agentur',$listing); ?> </span> <span><?php echo $CustomFields->field('jr_firma',$listing); ?></span></h5>
</div>

<div class="jrCol2 jrLeft ghi">

<span style=" float: left"><?php echo $Rating->overallRatings($listing, 'content'); ?></span> <br />
<h5 class="jrListingInfoButtons">

				<?php $Widgets->listingDetailButtons($listing);?>

			</h5>
    </div>

<div class="jrCol3 jrRightjkl">
  
   <button class="jr-send-inquiry jrButton jrSmall" data-listing-id="<?php echo Sanitize::getInt($listing['Listing'],'listing_id');?>">

<span class="jrIconMessage"></span><span><?php __t("Send Inquiry");?></span>

</button>

  </div>  </div>

CSS (insert it to you template css file)

.stickbar {
    height: 60px;
    position:fixed;
    top:0;
padding-bottom: 2px;
padding-top: 10px;
padding-left: 20px;
z-index: 1026;
width: 1148px;
margin-left:0;
background-color: #f7f8fa;
border: 1px solid #eee;
}
.abc img {
width: 50px;
height: 50px;
margin-top: -3px;
margin-left: 3px;
border: 1px solid #eee;
border-radius: 10px;
}

.jrRightjkl {
float:right;
margin-right: 20px;
margin-top: 2px;
}

.ghi {
margin-left: 30px;
margin-top: 1px;
}
.def .jrStatusIndicators span {

padding: 4px 8px;
font-size: 10px;
}
.ghi .jrRatingStarsUser, .jrRatingStarsEditor {
margin-top: 5px;
}

.def {
margin-top: 2px;
font-size: 16px;
max-width: 400px;
min-width: 400px;
overflow:hidden;
}
.def .jrStatusIndicators {
margin-left: 10px;
top: -1px;
}
.ghi button.jr-listing-claim {
margin-top: -4px;
}

.ghi div.jrListingButtons {
    margin-top: 7px;
}

post-26893-0-44108600-1503985141_thumb.png

Edited by BartoHH

Share this post


Link to post
Daniel.de

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post
BartoHH

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Edited by BartoHH

Share this post


Link to post
plethoraonline-1492071863

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post
n00bster

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post
Giorgi Todua

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.