如何修复导航栏位置？ [英] How to fix nav-bar position?
问题描述
这是我的个人网页。尝试使用Chrome和Firefox。预期效果仅在Firefox上显示（仅适用于首页部分）。
然而，当向下滚动并向后滚动到首页时，图像消失。 为什么会发生这种情况，我该如何解决？
此外，如何在Chrome中显示首页视差滚动效果？
相关代码：
HTML：
This is my Personal Webpage. Try both Chrome and Firefox. The intended effect is rendered only on firefox (only for the homepage portion).
However when I scroll down and scroll back up to the homepage,the image disappears. Why is this happening and how may I solve this?
Also,How can I render the homepage parallax scrolling effect in Chrome?
Related Code:
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;
}
推荐答案
>
solved it!
我注意到一个非常奇怪的行为，当图像不显示！
I have noticed very strange behavior that when image is not showing!
尝试调整浏览器的大小，并进行升级！它会显示你的背景
图像！ （这可能是我们可以关注的提示）
Try to resize you browser a bit and boom! it will show you background image! (this might be a hint where we can focus)
尝试对速记属性进行换算！
Try to longhand the shorthand properties!
- 我刚刚简化了你的短手属性！
- 然后我已移除
background-attachment：fixed;
- I have just simplified your short-hand properties!
- then i have removed
background-attachment: fixed;(and that was creating the problem) But i have just checked in inspect elements 3-times and its working!
通过删除 background-attachment：fixed; 属性并再次加载页面。
By removing background-attachment: fixed; property and load page again!
只需使用这些css：
just use these 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;
}
我已经注意到
And for the performance issue i have noticed that
- 你使用了这么多字体链接（字体awesome两次和大约15！
- 约300行嵌入式css！
- 尝试缩小
js，css c> c>和并减少http请求！ - 网站由于79 http请求非常慢！ / li>
- you have used so many fonts links (font-awesome twice and around 15! Thats too much)
- around 300 lines of embedded css!
- try to minify
js,cssandhtmland reduce http-request! - website is very slow due to 79 http request!
我已经分析了你的代码及其重写的css规则，为什么你的
头是不是你想要的！
I have analysed your code and its overriding css rules that why your header is not looking as you want!
- 因为我已经移除了一些css规则！
- 请移除此规则，我认为会解决您的问题！ >
- for that i have removed some css rules!
- please remove this rules, i think that will solve your problem!
- 全部删除所有内嵌样式的连结
删除一些css标头后，将如下所示：
After removing some css header will look like this
现在将此css添加到样式表中！
Now add this css to your stylesheet!
.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; }
有效的链接代码修改！
这里是活动链接颜色背景问题的步骤！
Active Link Code Modification!
Here is the steps for active link color background issue!
对于活动的Color Link Activation，请确保在linnk上单击
时，其< li>成为< li class =active>，然后只有
才会变成活动红色！For active Color Link Activation please make sure that when you click on linnk its
<li>becomes<li class="active">, Then and only then it will become active red!
最后润饰！工作视差效应
Final Retouch! Working Parallax Effect
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; }这篇关于如何修复导航栏位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
