语义UI如何在其网站上实现手风琴菜单的“跟随”行为？

Question

在Semantic UI Website如果您使用足够大的屏幕查看，则会在右侧看到手风琴菜单。此菜单很粘，但也会突出显示最靠近窗口顶部的页面上的当前部分。有人可以解释这是如何完成的？这个额外的代码只是为了这个网站还是Semantic UI的一部分？

Answer 1

它使用的可见性模块进行：https://semantic-ui.com/behaviors/visibility.html#how-to-use

下面是从语义UI网站的JS：https://github.com/Semantic-Org/Semantic-UI-Docs/blob/70965c088d727355b0c7598add151fcdb103a39f/server/files/javascript/docs.js#L183

这里是他们使用的浓缩版：

// ready event 
semantic.ready = function() { 

    // selector cache 
    var 
    $fullHeightContainer = $('.pusher > .full.height'), 
    $container   = $('.main.container'), 
    $allHeaders   = $('.main.container > h2, .main.container > .tab > h2, .main.container > .tab > .examples h2'), 
    $sectionHeaders  = $container.children('h2'), 
    $followMenu   = $container.find('.following.menu'), 
    $sectionExample  = $container.find('.example'), 
    $exampleHeaders  = $sectionExample.children('h4'), 
    $footer    = $('.page > .footer'), 

    // alias 
    handler 
    ; 

    // event handlers 
    handler = { 
    createWaypoints: function() { 
     $sectionHeaders 
     .visibility({ 
      observeChanges: false, 
      once: false, 
      offset: 50, 
      onTopPassed: handler.activate.section, 
      onTopPassedReverse: handler.activate.previous 
     }) 
     ; 

     $sectionExample 
     .visibility({ 
      observeChanges: false, 
      once: false, 
      offset: 50, 
      onTopPassed: handler.activate.example, 
      onBottomPassedReverse: handler.activate.example 
     }) 
     ; 
     $footer 
     .visibility({ 
      observeChanges: false, 
      once: false, 
      onBottomVisible: function(calculations) { 
      var 
       $title = $followMenu.find('> .item > .title').last() 
      ; 
      $followMenu 
       .accordion('open', $title) 
      ; 
      } 
     }) 
     ; 
    }, 

    activate: { 
     previous: function() { 
     var 
      $menuItems = $followMenu.children('.item'), 
      $section = $menuItems.filter('.active'), 
      index  = $menuItems.index($section) 
     ; 
     if($section.prev().length > 0) { 
      $section 
      .removeClass('active') 
      .prev('.item') 
      .addClass('active') 
      ; 
      $followMenu 
      .accordion('open', index - 1) 
      ; 
     } 
     }, 
     accordion: function() { 
     var 
      $section  = $(this), 
      index   = $sectionHeaders.index($section), 
      $followSection = $followMenu.children('.item'), 
      $activeSection = $followSection.eq(index) 
     ; 
     }, 
     section: function() { 
     var 
      $section  = $(this), 
      index   = $sectionHeaders.index($section), 
      $followSection = $followMenu.children('.item'), 
      $activeSection = $followSection.eq(index), 
      isActive  = $activeSection.hasClass('active') 
     ; 
     if(!isActive) { 
      $followSection.filter('.active') 
      .removeClass('active') 
      ; 
      $activeSection 
      .addClass('active') 
      ; 
      $followMenu 
      .accordion('open', index) 
      ; 
     } 
     }, 
     example: function() { 
     var 
      $section  = $(this).children('h4').eq(0), 
      index   = $exampleHeaders.index($section), 
      $followSection = $followMenu.find('.menu > .item'), 
      $activeSection = $followSection.eq(index), 
      inClosedTab = ($(this).closest('.tab:not(.active)').length > 0), 
      anotherExample = ($(this).filter('.another.example').length > 0), 
      isActive  = $activeSection.hasClass('active') 
     ; 
     if(index !== -1 && !inClosedTab && !anotherExample && !isActive) { 
      $followSection.filter('.active') 
      .removeClass('active') 
      ; 
      $activeSection 
      .addClass('active') 
      ; 
     } 
     } 
    } 
    } 

来源：https://github.com/Semantic-Org/Semantic-UI/issues/3323