如何解决导航栏位置？(How to fix nav-bar position?)

2019-10-20 18:36发布

站内文章 / 移动开发

13 0

女 | 书童

私信

这是我的个人网页。尝试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头后，将这个样子

对于标题链接

所有的Firts移除链接所有内嵌样式

现在，这个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;
}

活动链接代码修改！

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

对于活跃的颜色链接激活，请确保当你点击linnk其<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;
}

祝好运

Answer 2:

你的HTML是关闭的。那副作用是它混淆的JavaScript。

想想HTML作为骨架，它应该是对称的，如果它是不对称的一侧会比这将导致许多内部问题的其他较大。你不希望一方面5个手指，只有在其他3。

你有174开放 <div>标签，但178个结束标记。最重要的是你有13个开放 <section>标签，但15个结束标记。我推测错误是由于代码中的注释部分组成。我建议使用IDE指向了简单的错误（通过颜色的下划线）（记事本++或NetBeans的）。简单的错误，像丢失的分号，本来是可以避免这一点。

希德W3C标准，他们是有原因的。 这W3C报告增强了我的假设; 解决您的HTML错误，你的问题应该得到解决。

Answer 3:

Firefox和Chrome看起来都一样给我，所以不知道它是什么，你想实现准确。

如果是从顶部导航栏标识的消失，我认为有行高做的事：50属性。

不过，我想你想homepage.jpg为在所有整个页面的背景，那么你需要将它移动到身体的风格，或者你需要创建一些其他分区来保存页面的其余部分或您想要显示它。

您可能需要您的问题隔离到自己的精简HTML版本，一旦你解决它，你可能仍然需要开始添加其他部分增量，如果当您合并仍然有其他错误。

Answer 4:

卸下-webkit-backface-visibility: hidden; （animate.css第14行）。该-webkit-前缀“打破”的镀铬效果。其实它创建一个新overlaing静态图像。

Answer 5:

经过调查，我相信这个问题的根源在于有固定的上正在使用的方式位置section featured背景图像。

固定位置不工作按谷歌浏览器的W3C规范，这也是为什么视差滚动效果未能在Chrome工作。

简单地删除从后台位置应该可以解决图像消失在滚动的问题已解决。

改变从

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

至

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

当背景被设置为固定的，它类似于把一个固定“DIV”在后台并设定原始的div背景是透明的。

这实际上是在谷歌浏览器的错误。 （尽管其受欢迎的Chrome仍然没有comform Web标准，以及Firefox浏览器。）

解析度

虽然我一直无法与您的网站，以测试这个他们是这个bug解决方法。

设置元素的“ 位置 ”属性格式和所有的父元素为静态的，或者如果你给它一些其他的价值，即“ 相对 ”，“ 固定 ”或“ 绝对 ”，只是删除这些文件。

如果元素或任何容器元件，包括： body ＆ html具有比静态以外的任何位置属性将发生错误。

另外：

确保backface-visibility: hidden; 未设置该元件或任何其的容器，包括： body ＆ html 。

替代解决方案

一个替代方案是使用的CSS剪辑函数来创建类似的效果。

点击展示

演示由丹尼尔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;
}

文章来源: How to fix nav-bar position?