为什么我的响应CSS菜单会迫使页面内容向上跳转
Why is my responsive CSS menu forcing page content to jump upward?
我有一个相对于代码中其他元素定位的导航菜单。当你在最小宽度为200px max 767px的浏览器中查看此导航菜单，并打开导航菜单时，所有内容都会被向下推，这很好，因为你可以查看所有内容，但是，如果你在打开菜单的情况下开始向下滚动，页面内容会向上跳跃至少400+像素，不允许任何人阅读页面上1/4的内容。
我有一个脚本，可以让这个导航菜单粘在浏览器的顶部，当我关闭该脚本并重复上述操作时，一切都很好；唯一的问题是导航菜单不再粘在页面的顶部，当导航菜单打开时，它不会向下推任何内容，而是被扩展的导航菜单覆盖。
我附上了一把复制这个问题的小提琴。http://jsfiddle.net/y7Cgg/1/
对这种情况有什么补救措施吗？
编写脚本
$(document).ready(function(){
$(this).scrollTop(0);
});
$(window).scroll(function()
{
if( $(window).scrollTop() > 36 )
{
$('.mobile-nav-container').css({position: 'fixed'});
}
else
{
$('.mobile-nav-container').css({position: 'relative', top: '-3px'});
}
});
HTML
<div id="main-image2"></div>
<!----------------------------MOBILE NAVIGATION MENU----------------------------------->
<div class="mobile-nav-container">
<div id="main-logo-mobile"><a href="index.html"><img src="images/mobile-logo.svg" width="32px" alt="3Elements Review, a literary journal based in Chicago, Illinois. This is our magazine's mobile logo." border="none" id="main-logo-mobile"></a></div>
<button class="open-menu"><img src="images/menu-button.svg"></button>
<button class="open-menu-small"><img src="images/menu-button-small.svg"></button>
<nav class="nav-menu">
<div class="home-btn-mobile"><a href="index.html"><img src="images/home.svg" width="20px" alt="3Elements Review, a literary journal based in Chicago, Illinois." border="none" id="home-btn"></a></div>
<ul class="nav-menu">
<li class="mb-nav"><a href="current-journal.html">CURRENT JOURNAL</a></li>
<li class="mb-nav"><a href="subscribe.html">SUBSCRIBE</a></li>
<li class="mb-nav"><a href="submit.html">SUBMIT MATERIAL</a></li>
<li class="mb-nav"><a href="submission-guidelines.html">SUBMISSION GUIDELINES</a></li>
<li class="mb-nav"><a href="http://3elementsreview.blogspot.com">3E BLOG</a></li>
<li class="mb-nav"><a href="past-journals.html">PAST JOURNALS</a></li>
<li class="mb-nav"><a href="about-3elements.html">ABOUT 3ELEMENTS</a></li>
<li class="mb-nav"><a href="the-editors.html">THE EDITORS</a></li>
<li class="mb-nav"><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div><!----------------------MOBILE NAV CONTAINER END------------------------------->
<h1 class="image-header">USAGE RIGHTS</h1>
<div id="main-logo"><a href="index.html"><img src="images/logo.svg" width="100%" alt="3Elements Review, a literary journal based in Chicago, Illinois. This is our magazine's logo." border="none" id="main-logo"></a></div>
<h2 class="image-sub-head"></h2>
<nav class="container">
<ul>
<li class="home-btn"><a href="index.html"><img src="images/home.svg" width="37px" alt="3Elements Review, a literary journal based in Chicago, Illinois." border="none" id="home-btn"></a></li>
<li class="current" style="background-color:#313131;"><a href="current-journal.html" class="current">CURRENT JOURNAL<span class="sub-nav">Our latest and greatest!</span></a></li>
<li class="submit" style="background-color:#404040;"><a href="submit.html" class="current">SUBMIT<span class="sub-nav">Your writing</span></a></li>
<li class="guidelines" style="background-color:#505050;"><a href="submission-guidelines.html" class="current">SUBMISSION GUIDELINES<span class="sub-nav">Everything you need to know is here</span></a></li>
<li class="blog" style="background-color:#4b4b4b;"><a href="3eblog.html" class="current">BLOG<span class="sub-nav">Just a blog</span></a></li>
<li class="past" style="background-color:#404040;"><a href="past-journals.html" class="current">PAST JOURNALS<span class="sub-nav">Browse our issue archives</span></a></li>
<li class="about" style="background-color:#313131;"><a href="about-3elements.html" class="current">ABOUT 3E<span class="sub-nav">What we're about</span></a></li>
</ul>
</nav>
</div><!-----------------------------MAIN IMAGE END----------------------------------->
<div id="container"><!------------------------CONTAINER THAT SURROUNDS ALL CONTENT BELOW THE NAVIGATION BAR------------------------------->
<header>
<h1 class="page-headline">Usage Rights in our Journal</h1>
</header>
<section>
<article>
<p class="usage-rights">If <em>3Elements Review</em> decides to publish your work, we ask for first-time publishing rights. Afterward, the rights are reverted back to you. If your work is reprinted elsewhere, we ask that you reference <em>3Elements Review</em> as the original publisher. We also request the right to archive your work permanently. We reserve the right to include your work on our website, in printed form, and in collections of work acquired from our past issues, such as annual anthologies.</p>
<p class="usage-rights"><em>3Elements Review</em> retains no rights on submitted artwork and images; rights belong to the artist/photographer. However, by submitting your artwork or photography, you agree to allow <em>3Elements Review</em> to display your work on any of the following: 3elementsreview.com, <a href="https://twitter.com/3ElementsReview" class="p-social" target="_blank">Twitter</a>, and <a href="https://www.facebook.com/pages/3Elements-Review/165239120323115" class="p-social" target="_blank">Facebook</a>. If used in any of the aforementioned forms, your artwork/photos will always be credited to you.</p>
<p class="usage-rights">We reserve the right to modify the accepted work in terms of punctuation, word usage, spelling, and capitalization, with permission from the author. If the author declines the changes, we reserve the right to revert our decision to publish.</p>
<p class="usage-rights">The author confirms that the work is wholly original, does not violate or infringe upon the copyright or privacy of any other person or company whatsoever, and that they, the author, are the sole owner and creator of the work to be published.</p>
</article>
</section>
<footer class="bottom-footer">
<div id="nav-arrow"><img src="images/nav-arrow.svg" width="35%"><br><span class="arrow-text" style="width:100px; color:#f8f4ec; font-family:myriad pro, arial, sans-serif; font-size:1.25em;">Back to top</span></div>
<section class="footer-section">
<ul>
<li><a href="faq.html">FAQ</a></li>
<li><a href="terms-of-use.html">TERMS</a></li>
<li><a href="usage-rights.html" style="color:#ff6000; text-decoration:underline;">USAGE RIGHTS</a></li>
<li><a href="privacy-policy.html">PRIVACY POLICY</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="the-editors.html">MEET THE STAFF</a></li>
</ul>
<h3 class="subscribe-footer"><a href="subscribe.html">Subscribe to our newsletter</a></h3>
<div id="social-links-container">
<ul class="social" style="height:40px;">
<li><a href="https://twitter.com/3ElementsReview" title="Follow @3ElementsReview" target="_blank"><img src="images/twitter.svg" width="25%" alt="If you like our literary journal, follow 3Elements Review on Twitter" border="none"></a></li>
<li><a href="https://www.facebook.com/pages/3Elements-Review/165239120323115" title="Like us on Facebook" target="_blank"><img src="images/facebook.svg" width="25%" alt="If you find our literary journal interesting, like 3Elements Review on Facebook" border="none"></a></li>
<li><a href="https://plus.google.com/102175306984563852786" rel="publisher" title="+1 our page on Google+" target="_blank"><img src="images/google-plus.svg" width="25%" alt="Recommend our literary journal 3Elements Review on Google+" border="none"></a></li>
<li><a href="http://www.stumbleupon.com/stumbler/3elementsreview" title="Come say hello!" target="_blank"><img src="images/stumble.svg" width="25%" alt="If you like our literary journal, you can find our 3Elements Review page on StumbleUpon" border="none"></a></li>
</ul>
</div><!---------------SOCIAL LINKS CONTAINER END-------------------->
<h1 class="site-design"> © <script type="text/javascript">
var dteNow = new Date();
var intYear = dteNow.getFullYear();
document.write(intYear);
</script> 3Elements Literary Review, Chicago, IL <a href="http://www.marlonfowler.com" target="_blank">Site design by Marlon Fowler</a></h1>
</section>
</footer>
</div><!------------------------CONTAINER THAT SURROUNDS ALL CONTENT BELOW THE NAVIGATION BAR END------------------------------->
<!---------------------------------START OF GOOGLE RICH SNIPPETS DATA-------------------------------------------->
<div itemprop="location">
<span itemscope itemtype="http://schema.org/Place">
<div itemprop="geo">
<span itemscope itemtype="http://schema.org/GeoCoordinates">
<span property="latitude" content="41.943681"></span>
<span property="longitude" content="87.640844"></span>
</span>
</div>
</span>
</div>
<!---------------------------------END OF GOOGLE RICH SNIPPETS DATA-------------------------------------------->
</body>
</html>
CSS
@media only screen and (min-width:200px) and (max-width:767px) {
/******************************************NAVIGATION START*********************************************/
h1.page-headline {
top:0px;
text-align:center;
margin-top:0px;
margin-bottom:0px;
width:98%;
font-size:1.5em;
}
h2.sub-head {
top:10px;
text-align:center;
width:98%;
font-size:1.15em;
line-height:1.25em;
}
.mobile-nav-container {
position:relative;
background-color:#252525;
top:-3px;
width:100%;
height:22px;
border-bottom:3px solid #ffd09d;
z-index:300;
display:inline-block;
}
ul.nav-menu {/*navigation menu as a whole*/
position:relative;
top:-21px;
margin:0px;
padding:0px;
background-color:#252525;
width:100%;
border-bottom: 2px solid #ff6000;
}
nav ul li a {/*navigation list items*/
position:relative;
top:0px;
padding-left:5%;
padding-right:5%;
padding-top:3px;
line-height:1.9em;
border-bottom: 1px solid #313131;
width:90%;
height:30px;
display:inline-block;
font-family:myriad pro;
font-size:1em;
list-style:none;
transition:300ms;
-webkit-transition:300ms;
}
nav ul li {/*drop down list padding settings*/
list-style:none;
}
nav li a {/*main navigation text color and padding settings*/
position:relative;
top:0px;
margin:0px;
padding:0px;
color:#ffd09d;
text-decoration:none;
}
.nav-menu li:active a {/*main navigation TEXT HOVER effects*/
color:#ff6000;
background-color:#beb29a;
transition:400ms;
-webkit-transition:400ms;
}
.nav-menu li:hover a {/*main navigation TEXT HOVER effects*/
color:#ffa84a;
transition:300ms;
-webkit-transition:300ms;
}
.home-btn-mobile {
position:relative;
margin:0px;
top:-20px;
left:65px;
outline:none;
list-style:none;
display:inline-block;
}
button.open-menu-small {
position:relative;
top:1px;
left:3%;
margin:0px;
padding:0px;
width:23px;
height:19px;
display:inline-block;
outline:none;
background-color:#353535;
border:2px solid #424242;
box-shadow:0px 0px 2px #000;
cursor:pointer;
}
button.open-menu-small:active {
cursor:pointer;
border:2px solid #353535;
box-shadow:none;
}
/******************************************NAVIGATION END*********************************************/
/******************************************CONTENT FOR ALL PAGES*********************************************/
#container {
position:relative;
top:-15px;
height:300px;
}
#main-image img {
position:relative;
top:0px;
width:100%;
height:auto;
margin:0px;
padding:0px;
}
#main-image2 {
position:relative;
top:0px;
width:100%;
height:37px;
margin:0px;
padding:0px;
}
#main-logo-mobile {
position:absolute;
top:1px;
left:43%;
width:32px;
background-repeat:no-repeat;
z-index:1000;
border:none;
outline:none;
display:block;
}
.image-sub-head {
position:absolute;
top:43px;
left:0px;
right:0px;
text-align:center;
font-family:myriad pro light, arial, sans-serif;
font-size:1.3em;
color:#ffffff;
opacity:1;
z-index:4;
}
.current-elements {
top:30px;
width:100%;
left:0px;
right:0px;
text-align:center;
font-size:1.65em;
line-height:.85em;
opacity:1;
}
#elements-ticker {
top:15px;
left:0px;
width:100%;
margin-left:auto;
margin-right:auto;
padding-bottom:5px;
}
/******************************************CONTENT FOR ALL PAGES END*********************************************/
/*****************************************USAGE RIGHTS**************************************************/
p.usage-rights {
top:20px;
width:95%;
left:1%;
font-size:1em;
text-align:left;
line-height:1.5em;
}
.p-social:visited, .p-social:link {
color:#ff6000;
text-decoration:none;
}
.p-social:hover {
color:#ff6000;
text-decoration:underline;
}
/*****************************************USAGE RIGHTS END**************************************************/
/*****************************************FOOTER**************************************************/
footer.bottom-footer {
position:absolute;
width:100%;
height:200px;
background-color:#111111;
padding-right:0px;
}
section.footer-section ul {
position:relative;
width:100%;
height:120px;
margin:0px!important;
padding:0px!important;
text-align:center;
}
section.footer-section li {/*footer navigation text*/
top:20px;
left:0px;
margin-left:auto;
margin-right:auto;
font-size:.8em;
text-decoration:none;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-ms-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
border-left:1px solid #ff6000;
border-right:1px solid #ff6000;
padding-left:7px;
padding-right:5px;
display:inline;
}
section.footer-section li a {
color:#f8f4ec;
text-decoration:none;
}
section.footer-section li:nth-child(1), section.footer-section li:nth-child(2), section.footer-section li:nth-child(3), section.footer-section li:nth-child(4), section.footer-section li:nth-child(5) {
border-right:none;
}
section.footer-section li a:hover {/*footer navigation text hover effects*/
color:#ffd09d;
text-decoration:underline;
-webkit-transition:.4s ease-in-out;
-moz-transition:.4s ease-in-out;
-ms-transition:.4s ease-in-out;
-o-transition:.4s ease-in-out;
transition:.4s ease-in-out;
-webkit-appearance:
}
#social-links-container {
top:-20px;
left:8px;
width:120px;
height:38px;
margin-left:auto;
margin-right:auto;
z-index:1000!important;
}
ul.social li {
top:0px!important;
width:100%;
height:50px;
margin-left:-16.5px!important;
list-style-type:none;
display:inline;
left:0px!important;
z-index:1000!important;
transition:30ms;
-webkit-transition:30ms;
border:none!important;
}
ul.social li:hover {
top:5px!important;
transition:30ms;
-webkit-transition:30ms;
-webkit-filter:sepia(0%)!important;
filter:sepia(0%)!important;
}
ul.social li a {
outline:none;
border:none;
}
h1.site-design {
top:0px;
left:0px;
margin-bottom:0px;
text-align:center;
margin-left:auto;
margin-right:auto;
width:95%;
padding-bottom:0px;
font-size:.7em;
}
h1.site-design a:visited {
color:#ff6000;
}
h3.subscribe-footer {
position:absolute;
top:65px;
left:0px;
margin:0px!important;
padding-bottom:0px!important;
width:100%;
text-align:center;
font-size:.9em;
}
#nav-arrow {
top:95px;
width:70px;
height:30px;
right:2px;
z-index:2;
text-align:center;
}
#nav-arrow:hover {
cursor:pointer;
}
span.arrow-text {
position:relative;
top:-7px;
font-size:.75em!important;
}
/*****************************************FOOTER END**************************************************/
/*****************************************MAIN LAYOUT ITEMS THAT SHOULD NOT BE DISPLAYED IN MOBILE VIEW**************************************************/
nav.container, nav.container ul, nav.container-home, nav.container-home ul {
display:none;
}
.current, .submit, .guidelines, .blog, .past, .about {
display:none;
}
.image-sub-head-home {
display:none;
}
#main-logo {
display:none;
}
.image-header {
display:none;
}
我有一个简单的破解方法给你
$(window).scroll(function()
{
if( $(window).scrollTop() > 36 )
{
$('.mobile-nav-container').css({position: 'fixed'});
$('#container').css({
marginTop: '400px'
});
}
else
{
$('.mobile-nav-container').css({position: 'relative', top: '-3px'});
$('#container').css({
marginTop: '0px'
});
}
});
你可以在这里测试我的http://jsfiddle.net/nXPHZ/
为了更合适，我在JS中计算了菜单的高度，并将其传递到css()调用中。
问题是当nav是posiiton:relative时，它在文档流中，它的高度将决定内容的顶部。一旦它是position:fixed，它就会从文档流中删除，因此内容不会被它取代
建议您将内容包装在容器中，并设置适当的边距
相关文章：
- 我的响应菜单在移动版中不起作用
- 使我的视频标头响应
- 我正在努力使我的幻灯片响应
- 如何在我的“代码块”中使表格 Squarespace 网站响应式
- 进行自动实时聊天/虚假聊天，我的javascript跳过了第一个响应
- 为什么我的附加组件面板的内容脚本在更改 contentURL 后不再响应端口消息
- 使我的JS具有响应性
- Html5 Canvas Javascript使我的网页链接没有响应
- PHP应该压缩我的API响应
- 为什么我的响应CSS菜单会迫使页面内容向上跳转
- 我该如何将自己的数据添加到响应迅速的美国各州地图中
- 当我的响应菜单打开时，我如何删除用户转到侧面的功能
- 如何使我的数字刻度对滚动和单击做出响应
- 为什么我的ajax请求返回一个空响应
- 为什么我的rails应用程序在生产环境中没有正确响应.js格式
- 使我的谷歌地图宽度响应
- 对我的 JSON 响应进行排序
- 带有 JSON 返回的 AJAX 请求没有响应我的预期行为
- 响应我的命令的倒计时计时器
- PhantomJS.Org 需要很长时间才能响应我的幻影 js 脚本
