Custome module use for category data wise node fetch

   custom/custom.info.yml
name: Custom
description: This Is My Custom Module Make The Curd Operation, Block's and Simple Form.
core: 8.x
package: Custom
type: module

version: 8.x-6.3

   custom/custom.libraries.yml

block_header:
    version: 1.x
    header: true
    css:
        theme:
            css/style.css: {}
global-scripts:
  version: 1.x
  js: 

    js/add.js: { scope: footer } 

    custom/src/Plugin/Block/CategoryBlock.php


<?php
/**
 * @file
 * Contains \Drupal\module_name\Plugin\Block\HelloBlock.
 */

namespace Drupal\custom\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Url;
use Drupal\Core\Link;
use Drupal\image\Entity\ImageStyle;
use Drupal\Core\Entity;
use Drupal\node\Entity\Node;

/**
 * Provides a 'instagram' Block
 *
 * @Block(
 *   id = "category_block",
 *   admin_label = @Translation("Category block"),
 * )
 */
class CategoryBlock extends BlockBase {
   /**
   * {@inheritdoc}
   */
  public function build() {

    Global $base_url;
    $vid= 'type_de_document';
    $terms =\Drupal::entityTypeManager()->getStorage('taxonomy_term')->loadTree($vid);
$output = '<div class="row">';

$parentArray = array();
foreach (array_reverse($terms ,true) as $term) {
if($term->parents[0] == 0){
array_push($parentArray, $term);
}
}
$jointOperation = '';
    foreach ($parentArray as $parent) { // $out - abc

    $cat = '<h2 class="cat-title">'.$parent->name.'</h2>';
    $subcat = '';
    $abc = '';
    foreach ($terms as $child) {
    $nodes = \Drupal::entityTypeManager()
->getStorage('node')
->loadByProperties(['field_type_de_document' => $child->tid]);
    if($child->parents[0] == $parent->tid && $nodes == true){
    $subcat .= '<span class="childn"><span>|</span><a href="#'.$child->tid.'" class="ast">'.$child->name.'</a></span>';
    $abc .= '<h2 class="block-title"><div class="document-con" id="'.$child->tid.'">'.$child->name.'</div></h2>';
$item = '';
foreach ($nodes as $value) {
                    //$node_field_link = $value->get('field_link')->first()->getUrl()->getUri();

                    //$link = $value->get('field_link')->first()->get('uri')->getValue();
$link = $value->field_link->first()->uri;
// echo "<pre>";
// echo $link;
// die();
$title = $value->title->value;
$path = $value->get('field_photo')->entity->uri->value;

$uri_file_path = ImageStyle::load('documentation')->buildUrl($path); 
// echo $uri_file_path;
// die();
$item .= '<div class="col-xs-12 col-sm-6 col-md-3 taxo"><div class="views-row"><div class="views-field views-field-field-photo"><div class="field-content">';
$item .='<a href="'. $link.'" class="catesite"><img src="'.$uri_file_path.'" width="260" height="366" alt="convention rights of children" class="img-responsive"></a>';

$item .='</div></div><div class="views-field views-field-title"><span class="field-content gallery">';
$item .='<a href="'. $link.'" data-file="1" data-type="iframe" class="catesite" data-src="'. $link.'">'.$title.'</a>';


$item .='</span>';
$item .='</div>';
$item .='</div>';
$item .='</div>';
}

$abc .= $item;
    }
    }


    $jointOperation .= '<div class="catelog" id="myHeader">'.$cat .' '.$subcat .'</div> '.$abc;

    }
    $output .= $jointOperation;
$output .='</div>'; 
$build = [
  '#markup' => $output, 
'#attached' => [
    'library' => [
      'custom/block_header',
      'custom/global-scripts',
    ],
],
  '#cache'=> [
            'max-age' => 0,
        ],
  ];
  
  return $build;

}
}


   custom/js/Add.js

jQuery(document).ready(function(){
jQuery(".childn a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      jQuery('html, body').animate({
        scrollTop: jQuery(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
using Sticky when we have scroll
var newStickies = new stickyTitles(jQuery(".catelog"));
    
    newStickies.load();
      
    jQuery(window).on("scroll", function() {

        newStickies.scroll();
    
    });
  
  jQuery('.followWrap').each(function(){
    var that = jQuery(this);
    that.click(function(){
      that.next('.container').slideToggle();
    });
  });

});

function stickyTitles(stickies) {

    this.load = function() {

        stickies.each(function(){
        
            var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
                thisSticky.parent().height(thisSticky.outerHeight());
        
            jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

        });
    }
      
    this.scroll = function() {
    
        stickies.each(function(i){        
        
            var thisSticky = jQuery(this),
                nextSticky = stickies.eq(i+1),
                prevSticky = stickies.eq(i-1),
                pos = jQuery.data(thisSticky[0], 'pos');
      
            if (pos <= jQuery(window).scrollTop()) {
          
                thisSticky.addClass("fixed");
          
                if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
            
                    thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());

                }
          
            } else {
          
                thisSticky.removeClass("fixed");
          
                if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {
          
                    prevSticky.removeClass("absolute").removeAttr("style");
          
                }
          
            }
        });     
    }

}
   custom/css/style.css
#block-categoryblock .catcustom h2{
width: 100%;
    float: left;
}
#block-categoryblock .catesite{
color: inherit;
    text-decoration: none;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 400;
}
#block-categoryblock .views-field.views-field-title {
    margin-top: 12px;
    float: left;
    width: 100%;
}
#block-categoryblock .cat-title, .childn {
    clear: both;
}
#block-categoryblock .taxo {
    margin-bottom: 20px;
    min-height: 260px;
}
.adminimal-admin-toolbar #block-categoryblock .taxo {
    min-height: 300px;
}
#block-categoryblock h2.cat-title {
    display: inline-block;
    text-transform: uppercase;
    font-size: 22px;
}
#block-categoryblock span.childn {
    font-size: 18px;
    font-weight: 600;
    padding-left: 15px;
}
#block-categoryblock span.childn span {
    vertical-align: middle;
    margin-top: -8px;
    display: inline-block;
    margin-right: 15px;
}
#block-categoryblock .catelog{
    width: 100%;
    float: left;
}
#block-categoryblock span.childn a {
    color: #333333;
}
#block-categoryblock span.childn a:hover{
    color: #333333;
}
#block-categoryblock .col-xs-12.col-sm-6.col-md-3.taxo {
    padding-left: 0;
    padding-right: 25px;
}

.catelog.fixed {
    top: 84px;
    position: fixed;
    background-color: #ffff;
    z-index: 1;
}
.catelog.absolute {
    position: absolute;
}
.adminimal-admin-toolbar .catelog.fixed {
    top: 120px;

}