如何修复导航栏位置？

Question

这是我的个人网页。 尝试 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 请求！
• 由于 79 个 http 请求，网站非常慢！

---

#对于标题问题！

我已经分析了您的代码及其覆盖的 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;
}

活动链接代码修改！

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

---

对于激活的颜色链接激活，请确保当您单击链接时，它的<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;
}

![staaaaaaaaaaakkkkkk][6]

＃祝你好运

Answer 2

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

将 HTML 视为骨架，它应该是对称的，如果它不对称，一侧会比另一侧更大，从而导致许多内部问题。 你不会想要一只手有 5 个手指，而另一只手只有 3 个。

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

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

Answer 3

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

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

简单地从您的背景位置移除 FIXED应该可以解决滚动时图像消失的问题。

更改自

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

至

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

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

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

---

解析度

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

将元素和所有父元素的“位置”属性设置为“静态”，或者如果您给了它一些其他值，即“相对”、“固定”或“绝对”，只需删除这些。

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

此外：

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

---

替代解决方案

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

点击演示

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; }

Answer 4

Firefox 和 Chrome 对我来说看起来一样，所以不确定你想要实现什么。

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

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

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

Answer 5

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