Masonry categories as sticky menü

Hey Mike1050,
Thanks for your question, to make the masonry sort sticky on that page for tablets and above, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function sticky_masonry_sort_waypoint() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#top.page-id-102 .av-sort-by-term');
    if (width >= 767) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '118px'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'sticky_masonry_sort_waypoint');

and this css in the General Styling ▸ Quick CSS field:

.sticky-top {
    position:fixed!important;
    top:118px!important;
    z-index:510!important;
    background-color: #fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for your patience, to show the scroll-up button for mobile please try adding the css to your Quick CSS:

@media only screen and (max-width: 767px) {
.responsive #top #scroll-top-link {
    display: block;
}
}

For the /backhandwerk/ page, your question was scrolling to the top after clicking a category, but when I check you need to be at the top to click on a category.
So I’m not seeing where there a need here.
Please try explaining further, perhaps a screenshot would help.

Best regards,
Mike

Hi,
Thank you for your patience, to only have the scroll-up button for mobile on the /backhandwerk/ page, please change above the css to this:

@media only screen and (max-width: 767px) {
.responsive #top.page-id-102  #scroll-top-link {
    display: block;
}
}

To add a “scroll to the top” function when the masonry sort option is clicked for the /backhandwerk/ page only, try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_masonry_sort_scroll_to_top_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
$("#top.page-id-102 a.avia_show_sort").click(function(e) {
	setTimeout(function(){
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
	},1500);
	e.preventDefault();
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_masonry_sort_scroll_to_top_script');

Please note that in the script I had to add a setTimeout of 1500ms (1.5 seconds) to allow the images to show before scrolling to the top so to not conflict with the masonry display animation.
You can try adjusting higher or lower if you wish, but this may be an over all limitation because of how the masonry javascript works.
In my tests the setTimeout of 1500ms works well if the user scrolls down a bit before clicking a sort link, please give this a try.

Best regards,
Mike