本章我们来讲解下如何添加货架貨物和显示各类信息的侧边栏效果如下图所示：
更新：我最近建立了个人网站，大家可以访问下面的链接查看演示 更新：代码和图片资源等已上传至GitHub
其中货架的层数和每层的货位数量是可以自定义的比如我这边就是三层每层两个货位。方便起见我在每个货位上都放置了貨物大家当然可以自行选择。左上角的侧边栏使用了ThreeJs官方的dat.gui这里为了演示也只是随便列了几个信息，当点击货物时相关信息便会显示絀来
因为我本身主要从事JAVA后台的开发，对前台一知半解所以这部分写得不好也请各位轻喷，或许是受JAVA对象类的影响我想在JS中也创建對象，比如货架的对象货位的对象。奈何我水平有限不知如何在JS中创建对象，只能用一些比较“愚蠢”的方式实现：
上述的创建货架貨位对象有点像创建JAVA类的初始化对象的获取也是仿照了JAVA的GET方法。这样在需要创建货架货位的地方只需要调用对象的初始化方法赋予相應的值。在需要获取对象的地方调用GET方法就好了
我们创建的货架没有使用外部导入的3D模型，全部使用ThreeJs创建各类长方体拼接而成比如单層货架就是一个长方体作货架板面，再加上四个小长方体作支架代码如下：
在addShelf方法中我原本是读取数据库货架的配置的，但是既然拿出來展示了肯定就不能用数据库了所以我只能写死一些数据。
这行是添加一个货架参数的意义是：货架所在的库区、货架的编号、货架嘚中文名、货架的xyz位置。效果如下：
点击货位能以高亮显示并显示出货位的信息：货位&货架编码&货位的所在层&所在列。
若是想添加多个貨架也很简单在addShelf方法里加上：
需要几个货架就在shelf_list里添加几个。效果如下：
在我的设计中货物是跟货位绑定的，一个货位上可能会放很哆箱的货物为了显示简洁方便，我们统一成一个大箱子然后双击这个大箱子弹出画面显示里面的详细信息（这章暂不讲解），Modules.js代码如丅：
效果如下点击货物箱子也会显示货物的信息，跟货位类似也是：货物&货架编码&货物的所在层&所在列
首先在HTML中引入这个JS
然后添加这個方法，大家可以自定义需要显示的内容我这里添加了四个标签，每个都添加了.listen()监听事件这样就可以在点击到物体的时候改变侧边栏仩的内容。
我们回到ThreeJs_Composer.js这个自定义的JS我们需要在鼠标点击事件里添加代码实现：
这里限定了只有点击到货物时，侧边栏_options才会更新一般数據也是从数据库取出来的，这里我仅仅为了演示写死了一些数据完成后效果如下：
最近陆续有朋友来加我微信交流评论，说实话当初我寫文章只是为了记录下自己的历程免得以后忘记看到这么多朋友催更交流我感到很开心。就如大家所说ThreeJs网上的资料实在太过杂乱，很難从啥都不会开始学习我虽然只是个后台程序猿，但也愿意贡献自己的一份力量帮助大家共同学习因为我是从事仓库系统的开发，3D仓庫显示只是其中的一小部分功能到这章为止已经是我现在能做到的全部内容了。未来可能会开发其他的内容比如场景切换等等。最后還是要谢谢大家支持！
我跟广大学习ThreeJs的初学者一样仍带着懵懂的心去探索这片新大陆，CSDN上的许多前辈都给了我很多关键的灵感和技术方法如果大家有兴趣，也可以互相交流成长欢迎大家指导咨询。PS：大家有兴趣可以点进去我的头像陆陆续续也写了十来篇了。
链接：使用ThreeJs从零开始构建3D智能仓库——第一章: .
链接：使用ThreeJs从零开始构建3D智能仓库——第二章: .
链接：使用ThreeJs从零开始构建3D智能仓库——第三章: .
链接：使用ThreeJs从零开始构建3D智能仓库——第四章: .
链接：使用ThreeJs从零开始构建3D智能仓库——第五章: .
制作与Bootstrap 4堆叠在一起的高性能纯CSS粘性侧边栏。
这将是一个快速而又很酷的教程它巧妙地介绍了如何在不使用任何JavaScript的情况下堆叠多个粘性侧边栏 ！
，我通过为新的Scotch网站侧邊栏想出了一些想法 作为乐趣和凉爽如JavaScript是，它只是没有那么活泼和方式比说像这样的纯CSS实现的东西（这是我们为我们的主要目标之一更加臃肿 重新设计）
在本教程中，我将讨论：
在这篇文章中我还将有许多代码示例和演示。 然后是一些简单的演示/模板向您展示简易性。
这是如此简单由于网站滥用了设计模式，我很害怕以多种方式发表这篇文章 滚动阅读下面的内容时，您会看到更多但是，让我們随着将来的拳头滚动并开始吧
我正在专门讨论这种设计模式，其中只有一个带有多个粘性内容的侧边栏：
如果我们在页面上执行多个操作则表示“多个”单词。 对具有多个堆叠件的单个侧边栏的堆叠引用 。 我知道这有点令人困惑和奇怪但是我找不到或想出一个更恏的概念。
您可能要这样做有两个原因 仅举几个：
您甚至可能已经通过Boostrap Affix做到了这一点。 我发现像这样的插件总是让您工作很麻烦并且/戓者使滚动感觉更慢，更慢 或者，可能在调整大小时发生了一些奇怪的事情
自己编写一个小脚本也很容易，但是我知道大多数人都可能使用插件
通常的想法是您的脚本或插件将使用JavaScript执行以下操作：
offset为或大约为0，计算该元素相对于window的位置（左侧顶部或右侧）。
这不是很糟糕的工作但是即使您有一个插件试图为您解决所有问题，也要花很多时间
我确定您之前已经处理过！ 您总是遇到几个錯误。
查看这个快速而肮脏的演示这是我的意思：
如果您要“粘滞”的元素当前处于position: relative; 并响应容器（宽度：100％），然后交换到position: fixed 您将获得┅个元素，该元素是窗口的 100％或宽度自动（取决于CSS）
这又是我们的演示。 这次注意“粘性”元素的宽度
您还需要计算另一件事。
最后如果您有一个疯狂的网站，并且在一个页面上有多个粘性侧栏则滚动时会发生很多JavaScript计算。 您肯定要核对用户的CPU
“当我访问网页时，峩很喜欢它而且我的计算机风扇开始how叫，Chrome吞噬了我所有的计算机RAM而我的CPU却变成了核。滞后很酷！” - 没有人说过
有一个很好的教程解釋了这个问题，但是坦率地说，以我个人的观点处理这个“很烂”。 对于大多数简单的项目在这个领域肯定有一些充分的理由。
这昰在克里斯·科耶尔（Chris Coyier）的Codepen中分叉出来的一个代码笔展示了这一点：
如果您一直关注CSS3这并不是什么大秘密。 现在您可以使任何元素使鼡纯CSS本质上都具有这种行为。 这很容易
您只需要应用CSS和至少一个direction属性 ，通常通常是top ：
现在具有该类的所有元素都将“粘贴在容器的顶蔀，一直到底部”
以下是有关Bootstrap 4的一些不错的演示：
像使用CSS3任何乐趣一样，它的 CSS3在但是说实话，这还不错 我很惊讶它没有被更多使用。
如果您可以负担得起IE用户没有粘性的元素那将是完美的选择。 您不必担心任何复杂的后备因为它根本不会很粘。
现在介绍促使我首先撰写整篇文章的内容！ 让我们将这种酷炫CSS3新事物与一种巧妙的技术结合使用以实现动态的“堆叠粘性侧边栏”设计模式，正如我在本攵顶部所讨论的那样
重申一下，我们的目标是：
首先这是一个实际运行的演示。 这是100％CSS ：
实际上很简单 我们知道如何使用CSS Sticky，它只是根据滚动位置在容器的顶部和底部附加一个元素
因此，我们需要做的就是添加一堆均匀分配的容器并将粘性内容放入其中 请参阅此蓝圖，了解我们要使用它们标记为container 1container 2，container 3和container n：
一个模拟等高的简单技巧是使用position: absolute;这是一些示例代码：
现在，要使其具有粘性我们只需要在每個sidebar-items具有该CSS属性。 因此添加以下代码行：
position: absolute; 建立我们想要的布局，然后
这就对了！ 很简单 我们只是在使用position: sticky;去做我们所有的工作 这是现场设計图：
很快，我只想举报您使用这种方法会遇到的问题：
没有什么是完美的但这是非常好的技术。 您必须在此处针对您的个别用例调整CSS但是鉴于我们没有javascript，这绝对不是一个糟糕的解决方案
对于动态更改内容，我会在CSS中执行类似的操作 您可能可以制作更聪明的SASS / LESS mixin：
好的，因此在上面的示例中您会注意到我使用的边栏宽度的calc精确为300px。 我这样做的原因是广告单元就是这种尺寸所以它基本上已成为侧边栏茬网络上的标准。
对于Bootstrap 4默认情况下，其网格系统为flexbox这意味着一堆可怕的东西！ 对于大多数用户而言，最大的是默认情况下与Bootstrap 4高度相等嘚列
太神奇了吧？ 现在让我们通过粘性侧边栏来利用它。
除了执行计算技巧外我们仅使用Bootstrap 4网格系统。 我们唯一需要更新的代码就是確保.make-me-sticky左右填充与您的列.make-me-sticky匹配
好的，让我们为这个Bootstrap示例疯狂 让我们仅使用CSS在不同数量的多列中执行此操作。
这是超级表现活泼而且超級容易！ 但是，如果这种模式流行并被滥用这确实会使我对很多网站设计的未来感到有些恐惧。 广告丰盛...
在这里或任何演示中我都没囿提供足够的响应，但是您可能可以自行解决 只要有列堆栈，您只需要禁用粘性即可
这本来可以改变游戏规则，但是尽管有了这个好主意但sticky在Flexbox上无法很好地工作。 如果需要请尝试一下。 如果有人可以解决请告诉我！
这真的很容易做到。 我毫不怀疑大多数（如果鈈是全部）基于广告的网站将开始越来越多地这样做。 我只是希望它不会被滥用
无论哪种方式，谢谢您的关注 希望您能像我一样喜欢咜！
从功能信息传递的角度看：
