老蜗牛：家庭影院（客厅影院）布线实战攻略

.引子

关于客厅家庭影院布线的问题，经常有人问到，很多细节小问题前期忽略了，就会导致后面巨大的麻烦。一遍一遍地说确实有点心累，这里我根据个人经验整理一下，希望对准备装家庭影院的你有所帮助，如有疑问，可以加老蜗牛个人QQ或者微信：860275582。

一个家庭影院的组建流程是这样的：首先确定好整体设备方案，最好自己做个表格，详细把所有设备列出来，一目了然，当然装修周期一般比较长，小户型短则三四个月，大别墅多则两三年，投影机、功放这种电子产品每年都会出升级换代新款，不过一般尺寸、投影距离等常规参数一般是不会有太大变动的。

如果实在没办法确定整体配置方案，那么也要把以下几个关键问题确定下来：多少声道(最少的5.1到目前民用最高的7.2.4)，音箱尺寸和安装方式(入墙?壁挂?外摆?)，幕布尺寸和安装方式(电动幕一般在吊顶留槽，预留电源)，投影机投射比(关系到投影机安装位置)，未来功能扩展(增加游戏机、智能控制)等等。

方案大体确定下来以后，就可以定点位了，确定好位置以后开槽布线，如果是嵌入式音箱，还需要做好底盒背箱，固定在墙里，关于底盒可以看下之前的帖子：《家庭影院嵌入式音箱背箱底盒怎么做》http://www.hdav.com.cn/play-hometheater/20171121_4091.html。

二.水电改造前家庭影院预埋建议准备材料：

1) 音箱线(喇叭线);

2) HDMI高清视频线;

3) 同轴信号线(低音炮线);

4)六类网线;

5)三色4-6平方电源线。

三.定点位建议：

首先是设备柜，一般也就是电视柜了，通常放在幕布下面，播放器，功放等设备都会放在这里。

然后是幕布尺寸，根据前面的设备方案确定吊装电动幕还是挂墙的框架幕，如果是电动幕，就要根据幕布尺寸确定幕布槽大小，并在幕布槽里预留电源插座(根据老蜗牛个人经验，大部分都是在左侧，当然不是绝对的，还是要根据具体品牌和型号)。

以100寸电动幕布吊顶安装为例，幕布槽处吊顶木板加固，幕布左侧留五孔电源插座，幕布槽一般长度要至少达到幕布盒总长度加上0.3米，宽度和深度为0.15米即可，如果后面还装了平板电视的话，建议幕布槽距离电视墙0.1-0.2米。

如果预算充足，用传统投影机搭配长焦抗光幕是个不错的方案，基本可以取代平板电视机，画面大，不拉窗帘的情况下画质相对普通白幕要好得多，不伤眼，适合家里有孩子的情况使用。幕布定点位一般就是电视墙的左右正中间，高度是幕布下沿距地面0.6米左右。

接着根据投影机的投射比和幕布尺寸，确定投影机预留HDMI线和五孔电源插座的位置，值得注意的是，一般投影机官方给出的投影距离是投影机镜头到幕布的距离，如果你把线恰好埋在最短投影距离位置，那肯定投不满幕布了。

5.1家庭影院音响系统中一般会把环绕音箱挂着沙发两侧，与中置音箱成90~110度方向，这样可以带来更为准确的声像定位，而因为客厅环境限制，沙发两侧一般都是餐厅过道和阳台窗帘，导致沙发两侧没有位置挂环绕音箱，只能挂在后墙上，尽量向两侧拉开距离，但是也不宜装在墙角，建议距离侧墙至少0.5米以上(当然具体情况具体分析)。

至于环绕音箱的高度，通常建议高于坐在沙发上人耳0.6米左右，也就是距地面1.8米左右，这样做的目的，就是为了加大环绕音箱距离，避免聆听位距离其中一只环绕音箱过近，导致破坏声场的均衡度，包围感自然会劣化。在这种沙发靠墙的客厅影院环境下，老蜗牛个人推荐偶极式音箱或双向发声环绕音箱，效果更理想。

目前有很多人考虑用吸顶式喇叭做环绕音箱，老蜗牛个人不太推荐这种做法，不过有时候为了家里领导的美观度第一，声音第二原则，倒也是一种妥协的办法，这种情况下，也尽量用声音指向可调的音箱，效果会更理想些，至于前置音箱也吸顶的做法，我觉得基本就是乱搞了，不太可取，原因我在之前的帖子里都说过，这里就不重复了。

两只前置音箱建议装在幕布两侧的中间高度，或与聆听位耳朵齐平(1.2米左右)，避免距离吊顶或地面太近造成声染色，另外还可以提升声像定位准确性。

至于中置音箱，在幕布上面或者下面都可以，各自的好处之前说过了，不再细表。一般如果是电动幕的话，模板上面就不方便装中置音箱了，通常会把中置音箱放在电视柜上(这种情况中置音箱就不需要预埋线了，或者埋线高度在0.6米左右，这里要考虑电视柜的高度，不要被挡住)，即幕布下面，这样的好处就是方便安装维护和折腾升级。

当然也有用框架幕或者电视的情况，把中置音箱挂在幕布上面的，当然如果音箱太重就不太好操作了，挂不住掉下来砸坏了电视柜可没人赔，小型壁挂音箱是完全可以的，这样相对摆在电视柜上，声场开阔度会有很大提升，尤其是小口径音箱，挂墙使用声音中低频会更厚实一些。

低音炮一般就是放在电视柜两侧了，注意事项就是尽量避开墙角(低音炮放墙角会激发所有房间模式，说白了就是驻波会更严重)，至于全景声5.1.2或者5.2.4，可以参考老蜗牛之前的帖子《杜比全景声天空喇叭到底怎么摆？》http://www.hdav.com.cn/play-hometheater/20161015_3787.html，为什么不说7.1.2或者7.2.4?客厅环境不合适，除非沙发不靠墙。

杜比全景声 (Dolby Atmos) 5.1.2 家庭影院扬声器布置

四.布线注意事项及建议：

1、关于电源，建议功放位置和投影机位置分别从总电箱单独拉一条回路，一方面保证功率充沛，另外可以避免家里其他电器设备干扰。因为传输能量的强电线路会产生较强的电磁干扰，而音箱线、HDMI线这种弱电信号线传输的是至关重要的信号数据，容易受干扰，所以一般要求强弱电之间至少距离0.5米，如果在走线过程中有交叉，应该用金属过桥管或者铝箔包一下，起到屏蔽作用。

2、确定好所有设备点位，就可以开槽布线了。一般建议在音箱、投影机位置出线预留1米出来，低音炮位置最好能留2米，方便移动调整炮位避开驻波;设备柜这边所有出线预留1-2米，方便以后设备维护，不然线短了以后想把功放机拖出来就比较蛋疼了，这里老蜗牛建议你一定要认真叮嘱工长，或者亲临现场监工，因为我遇到过很多这种情况，线留得参次不齐，很是头疼。

3、音箱线一般建议用300芯或者1.5平方以上的无氧铜线材，PVC 25管子预埋即可，另外就是如果音箱壁挂安装，最好在音箱位置预留86底盒(不用问我这是什么东西，电工都知道)，后期安装音箱时多余的线可以塞进去，如果音箱暂时不装的话也可以用白板盖起来，更美观。

4、关于HDMI高清线，HDMI线建议预埋两条，用PVC 50管走大弯，因为HDMI线非常脆弱，线又粗又硬，一旦埋进墙里很难抽出来更换，所以留一条备用很有必要。另外就是如果考虑以后加装智能控制系统，还需要预埋一条六类网线，这个不是用来上网的，用来传输232协议。

穿管穿墙布线时忌拽着HDMI线插头用力拉扯，很容易坏;埋管穿线时一定要及时保护好插头，用防水胶带缠好，避免进灰和水，穿线后用袋子装起来;有方向性的HDMI线(喇叭线、音频信号线也要注意，一般线身上有类似箭头样的标志)注意别搞错方向，方向为从功放端到投影机或显示器端;HDMI线插拔时一定要关掉设备断电，避免烧坏线材或设备，切记。

五.常规客厅影院系统连接参考图

以上关于家庭影院布线问题的探讨希望对准备装家庭影院的你有所帮助，如有疑问，可以加老蜗牛个人QQ或者微信：860275582。

更多新鲜好玩的家庭影院资讯请关注家庭影院网http://www.hdav.com.cn (微信：cnhifi)，全国极具影响力的家庭影院音响玩家互动媒体网站。

天分享了一个Vue导航吸顶组件，今天继续给大家推荐一款React吸顶组件ReactSticky。

react-sticky 基于react.js构建的轻量级滚动粘性库组件，star高达2.4K+。支持多个navbar或两列布局粘性。

旨在让开发者创建sticky元素的UI更加容易。

css3实现一个简单的吸顶结构。

注意：position:sticky在IE下支持不够友好，大家使用前需视情况考虑。

<div class="sticky-container">
  <div class="sticky">吸顶内容</div>
</div>

body {
  height: 1200px;
}
.sticky-container {
  /**
    因为sticky需要外层容器高度，所以这里需要设置，或者靠sticky元素的兄弟给父元素撑起高度
  **/
  height: 400px;
  background:red;
}
.sticky {
  position: sticky;
  top: 0px;
  background:blue;
}

安装

$ npm i react-sticky -S

使用组件

import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
// ...

class App extends React.Component {
  render() {
    return (
      <StickyContainer>
        <Sticky>
          {({style})=> (
            <header style={style}>
              {/* ... */}
            </header>
          )}
        </Sticky>
        {/* ... */}
      </StickyContainer>
    );
  },
};

<StickyContainer>
  ...
  <Sticky topOffset={80}>
    { props=> (...) }
  </Sticky>
  ...
</StickyContainer>

上面将会导致一个元素变成 sticky 如果它的顶部距离 <StickyContainer /> 的顶部大于或等于 80px

<StickyContainer>
  ...
  <Sticky bottomOffset={80}>
    { props=> (...) }
  </Sticky>
  ...
</StickyContainer>

上面将会导致一个元素停止 sticky 如果它的底部距离 <StickyContainer /> 的底部是 80px

非常好的一款开源react.js吸顶组件。如果大家感兴趣可以去试试。

# 演示地址
https://react-sticky.netlify.app/

# 仓库地址
https://github.com/captivationsoftware/react-sticky

ok，今天就分享到这里。希望大家能喜欢哈！

言

近日，在做活动页的过程中遇到两层吸顶的需求，并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛，应该不难吧，事实证明还是踩了很多坑才出来。兼容性问题多到吐血，我太难了。废话不多说，先看一下两层吸顶的最终实现效果，如下图所示。

功能点：两层吸顶，因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置，这个功能点和锚点有些类似。二层 Tabs 通过 hover 切换，没有回弹效果。

实现方式

本文主要通过 VueSticky 插件来实现吸顶，实现步骤描述如下：

安装：npm install vue-sticky --save
引入: import VueSticky from "vue-sticky"
使用：

directives: {
 'sticky': VueSticky,
},

<ELEMENT v-sticky="{ zIndex: NUMBER, stickyTop: NUMBER, disabled: [true|false]}">
 <div> <!-- sticky wrapper, IMPORTANT -->
 CONTENT
 </div>
</ELEMENT>

看了 VueSticky 的源码后将该插件的实现原理简要概括如下：

首先判断该浏览器是否支持 position:sticky;，若支持就用 position:sticky; 来实现，若不支持就用 position:fixed; 的方式实现

所以大家不用担心兼容性问题，因为我已经帮大家测试过了，IE9 及以上的浏览器都可以支持。

生效条件

需要注意的是，使用 v-sticky 有几个必要条件，否则会失效：

父元素不能设置 overflow:hidden 或者 overflow:auto 属性
至少指定 top 、bottom 、left 、right 4 个值中的一个，否则只会处于相对定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素仅在其父元素内生效

问题汇总

◎ 吸顶“叠罗汉”

吸顶元素在滚动到组件底部时，在谷歌、火狐等浏览器中，两层吸顶在消失过程中有重叠现象，具体现象如下图所示:

主要原因：第一层吸顶还符合吸顶条件，第二层吸顶已经开始消失解决方案：给第一层吸顶元素添加 minHeight 属性，其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。这里有一个需要注意的点在于：一开始第一层吸顶元素的高度并非两者之和，所以这里就需要监听滚动事件，在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性

以下代码块中，sumHeight 表示两个吸顶元素的高度和，initialHeight 表示的是第一层吸顶元素的高度

const offsetTop=document.querySelector(".xxx").offsetBottom;
 if (offsetBottom <=sumHeight) {
 document.querySelector(".xxx").style.minHeight=sumHeight;
 } else {
 document.querySelector(".xxx").style.minHeight=initialHeight;
 }

◎ 吸顶“舍不得离开”

在 IE 浏览器中，吸顶元素滚动到组件底部时不消失，具体现象如下图所示

主要原因：在滚动过程中吸顶元素的 position:sticky; 属性始终存在

解决方案：监听滚动事件，当滚动到组件底部时，将 v-sticky="{ stickyTop: 0, disabled: false }" 中的 disabled 的值设为 true 即可

◎ 吸顶“难舍难分”

在 IE 浏览器中，两层吸顶元素始终吸在一起

主要原因：第二层吸顶元素在不需要吸顶的区域，它的 position 值也为 sticky

解决方案：监听滚动事件，在不需要吸顶的区域设置它的 position 值为 static 即可

◎ 吸顶“变形”

同样 DOM 结构的吸顶元素，在 IE 浏览器中，吸顶会变形

查看 vue-sticky 的源码，发现 position:fixed; 是设置在要吸顶的元素的第一个子元素上

因此为了兼容IE需要多加一层 div 结构

<div v-sticky="{ stickyTop: 0, disabled: false }">
 <div><!-- sticky wrapper, IMPORTANT -->
 content
 </div>
</div>

注意事项

组件的监听与移除mounted() {
// handleScroll 为页面滚动的监听回调
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
removeEventListener("scroll", this.handleScroll);
},

同时要在 destroy 回调中移除监听
在 mounted 回调中加入以下代码

优化点

用监听事件监听滚动时，吸顶消失的很突兀let supportCSSSticky=document.querySelector(".xxx").style.position==="sticky";
if (!supportCSSSticky) {
// 不支持的情况下监听滚动
}

判断浏览器是否支持 sticky ，若支持用 position:sticky; 实现，否则用 position:fixed;

图片懒加载

对于图片过多的页面，为了加速页面的加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验，关于图片优化方面内容可以阅读我们团队另一篇文章为你重新系统梳理下， Web 体验优化中和图有关的那些事（万字长文）

总结

本文简单的介绍了 VueSticky 插件的实现原理并分享了实战过程中出现的问题以及解决方案，希望对大家有所帮助。如果大家也遇到过两层吸顶的问题或者你还知道更好的解决方案，欢迎在评论区留下宝贵评论。

原文链接：https://www.zoo.team/article/double-ceiling

在线咨询

上一篇：毕业季卖花，手把手教你做一个HTML5鲜花商城
下一篇：好程序员web前端培训HTMLCSS学习笔记之页面优

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

老蜗牛：家庭影院（客厅影院）布线实战攻略

安装

使用组件

您的项目需求