如何修复导航栏位置？

Question

这是我的Personal Webpage。尝试 Chrome 和 Firefox。预期效果仅在 Firefox 上呈现（仅适用于主页部分）。

但是，当我向下滚动并向上滚动到主页时，图像消失了。 为什么会发生这种情况，我该如何解决？

另外，如何在 Chrome 中渲染主页视差滚动效果？

相关代码：

HTML：

<section class="featured">
            <div class="container"> 

                <div class="row mar-bot40">
                    <div class="col-md-6 col-md-offset-3">

                        <div class="align-center">
                            <div class="team-member">
                                <figure class="member-photo1" ><img class="works" src="img/Work/me.jpg"  alt="" /></figure>

                        </div>
                            <h2 class="slogan" style="color:white;">name<a style="color:white;font-family: 'Lobster', cursive; font-weight:normal">.com</a></h2><h3 style="font-family: 'Shadows Into Light', cursive; color:#A2F1FE; font-size:35px;"><strong>Inspired by <a style="color:#FF2744">Purpose</a>.<br>Driven by <a style="color:#FF2744">Passion</a>.</strong></h3>
                        </div>
                    </div>
                </div>

                            <div class="row animated opacity mar-bot20" data-andown="fadeIn" data-animation="animation">
                <div class="col-sm-12 align-center">
                    <ul class="social-network social-circle">
            <li><a href="mailto:name@gmail.com" target="_top" class="icoGmail" title="Gmail"><i class="fa fa-envelope"></i></a></li>
                        <li><a href="https://github.com/" class="icoGit" title="Github"><i class="fa fa-github"></i></a></li>
                        <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="https://plus.google.com/+" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="http://stackoverflow.com/users/2477978/"  class="icoStackoverflow" title="Stackoverflow"><i class="fa fa-stack-overflow"></i></a></li>
                        <li><a href="http://www.linkedin.com/pub/-ganguly/52/641/301" class="icoLinkedin" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
                    </ul>   
            </div>
            </div>
            </div>

        </section>

CSS：

section.featured {
    padding: 200px 0 255px;
    background: url('homepage.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fdfdfd;

}

section.featured h2.slogan {
    color: #ffffff;
    font-size: 48px;
    font-weight: 900;
}

 /* inner heading */
section.featured.inner {
    background: #eee;
    padding: 150px 0 50px;
}

Answer 1

#解决了！

我注意到当图像没有显示时非常奇怪的行为！

尝试稍微调整一下浏览器的大小，然后繁荣！它会告诉你背景 图片！ （这可能是我们可以集中注意力的提示）

尝试速记属性！

• 我刚刚简化了您的速记属性！
• 然后我删除了background-attachment: fixed;（这是造成问题的原因）
• 但是我刚刚签入了 3 次检查元素并且它工作正常！

通过删除background-attachment: fixed; 属性并再次加载页面！

只需使用这些 css：

section.featured {
    padding: 200px 0 255px;
    background-image: url('homepage.jpg');
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fdfdfd;
}

---

对于性能问题，我注意到了

• 您使用了如此多的字体链接（字体太棒了两次，大约 15 个！太多了）
• 大约 300 行嵌入式 css！
• 尝试缩小js,css 和html 并减少http-request！
• 由于 79 个 http 请求，网站非常慢！

---

#For Header 问题！

我已经分析了您的代码及其最重要的 css 规则，这就是为什么您 标题看起来不像你想要的！

• 为此我删除了一些 CSS 规则！
• 请删除此规则，我认为这将解决您的问题！

删除一些 css 标头后将如下所示

![标题][2]

#对于标题链接

• 首先删除链接的所有内联样式

现在将此 CSS 添加到您的样式表中！

.navbar .nav>li>a {
font-family: 'Lato', sans-serif !important;
padding: 10px 15px 10px;
color: #fff !important;
}

.navbar .nav>li>a:hover {
color: #ccc !important;
}

主动链接代码修改！

这是活动链接颜色背景问题的步骤！

---

对于激活的颜色链接激活，请确保当您单击 在 linknk 上，它的 <li> 变为 <li class="active">，然后只有这样 它会变成红色！

---

#最终润饰！工作视差效果

section.featured {
    padding: 200px 0 255px;
    background-image: url('homepage3.jpg');
    background-repeat: no-repeat;
    position: static;
    background-position: inherit;
    background-attachment: fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    color: #fdfdfd;
}

![staaaaaaaaakkkkkk][6]

#祝你好运

Answer 2

您的 HTML 已关闭。这样做的副作用是混淆了 javascript。

把 HTML 想象成一个骨架，它应该是对称的，如果它不对称，一侧会比另一侧大，这会导致许多内部问题。您不会希望一只手有 5 个手指，而另一只手只需要 3 个手指。

您有 174 个开始 <div> 标签，但有 178 个结束 标签。最重要的是，您有 13 个开始 <section> 标签，但有 15 个结束 标签。我推测错误是由于注释掉的代码部分造成的。我建议使用指出简单错误（通过彩色下划线）的 IDE（Notepad++ 或 NetBeans）。本来可以避免的简单错误，例如缺少分号。

注意 W3C 标准，它们的存在是有原因的。 This W3C 报告加强了我的假设；修复您的 HTML 错误，您的问题应该会得到解决。

Answer 3

Firefox 和 Chrome 在我看来是一样的，所以不确定你想要实现什么。

如果是徽标从顶部导航栏中消失，我认为这与 line-height:50 属性有关。

但我认为您希望 homepage.jpg 位于整个页面的背景上，然后您需要将其移动到 body 样式中，或者您需要创建一些其他 div 来保存页面的其余部分或您想要的位置显示出来。

您可能需要将您的问题隔离到其自己的精简 html 版本中，一旦您修复它，如果在合并时仍有其他错误，您可能仍需要开始逐步添加其他部分。

Answer 4

删除-webkit-backface-visibility: hidden;（animate.css 第 14 行）。 -webkit- 前缀“破坏”了 chrome 中的效果。实际上它会创建一个新的叠加静态图像。

Answer 5

经过调查，我认为问题的根源在于section featured 背景图像上使用固定位置的方式。

固定位置在 Google chrome 中无法按照 W3C 规范工作，这也是视差滚动效果在 Chrome 中无法正常工作的原因。

只需从背景位置REMOVING FIXED即可解决图像在滚动时消失的问题。

改变自

section.featured {
    background: url('homepage.jpg') no-repeat center center fixed; 
}

到

section.featured {
    background: url('homepage.jpg') no-repeat center center; 
}

当背景设置为固定时，类似于在背景中放置一个固定的'div'，并将原来的div背景设置为透明。

这实际上是 Google Chrome 中的一个错误。 （尽管 Chrome 很受欢迎，但仍然不符合 web 标准以及 firefox。）

---

分辨率

虽然我无法在您的网站上对此进行测试，但它们是解决此错误的方法。

将元素和所有父元素的 'position' 属性设置为 'static'，或者如果您给了它一些其他值，即 ' relative'、'fixed' 或 'absolute'，只需删除它们即可。

如果元素或任何容器元素，包括：body & html 具有除静态以外的任何位置属性，则会发生错误。

另外：

确保没有在元素或其任何容器上设置backface-visibility: hidden;，包括：body & html。

---

替代解决方案

另一种方法是使用 css 剪辑功能来创建类似的效果。

CLICK FOR DEMO

Daniel Perván 的演示

.element {
  position: relative;
  height: 400px;
}

.clipper {
    position: absolute;
    clip: rect(auto,auto,auto,auto);
    width: 100%;
    height: 100%;
}

.image {
  background: url(http://image.jpg) no-repeat 50% 50%;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
}