0
我有一個固定的導航欄，可以在桌面，響應者等方面完美地工作。當我嘗試在我的iPhone上填寫表單字段時，導航欄神祕地浮動;當我向上或向下滾動時，它停留在屏幕中間。導航欄在智能手機上填寫表格時浮動
任何幫助將不勝感激。我的代碼在這裏可用and on jsFiddle。
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function (e) {
e.preventDefault();
menu.slideToggle();
});
$('nav li>a').on('click', function (e) {
if ($(window).width() < 600) {
menu.slideUp();
}
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});/* Clearfix */
.clearfix:before, .clearfix:after {
content:" ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height:42px;
top: 0;
position: fixed;
border-bottom: 2px solid #e1e1e1;
width: 100%;
margin: 0px auto;
background: #e63333;
font-size: 105%;
font-weight: 400;
text-align: center;
z-index:99;
}
nav ul {
padding: 2px;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 80px;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #f95f5f;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {
height:auto;
top: 0;
background-color:#e35f5f;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
background-color:#e35f5f;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #e63333;
width: 100%;
position: relative;
box-shadow: 2px 2px 0px #888888;
}
nav a#pull:after {
content:"";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
@media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Clearfix */
/* Chef Registration Form */
:-moz-placeholder {
font-size: 105%;
font-weight: 400;
}
::-webkit-input-placeholder {
font-size: 105%;
font-weight: 400;
}
*:focus {
outline: none;
}
.form {
margin: 10px auto;
width:60.5%;
height:auto;
background-color: #e6e6e6;
border: 1px solid #b9afaf;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
padding-left: 2.5%;
padding-top: 20px;
}
.form input {
width: 90%;
padding: 8px 0 8px 8px;
margin-left: 12px;
list-style-type: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border: 1px solid #ccccff;
background: #fafafa;
}
.form button {
width: 91%;
margin-bottom: 8px;
margin-left: 15px;
}
.form li {
padding-bottom:8px;
position:relative;
list-style-type: none;
}
.form textarea {
max-width: 90%;
min-width: 90%;
padding: 4px 0 4px 8px;
margin-left: 12px;
}
.form input, .form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #fafafa inset;
}
.form input:focus, .form textarea:focus {
background: #fff;
border:1px solid #6699ff;
box-shadow: 0 0 3px #aaa;
list-style-type: none;
}
/* Button Style */
button.submit {
background-color: #e63333;
background: -webkit-gradient(linear, left top, left bottom, from(#e43535), to(#e63333));
background: -webkit-linear-gradient(top, #e43535, #e63333);
background: -moz-linear-gradient(top, #e43535, #e63333);
background: -ms-linear-gradient(top, #e43535, #e63333);
background: -o-linear-gradient(top, #e43535, #e63333);
background: linear-gradient(top, #e43535, #e63333);
border: 1px solid #888888;
border-bottom: 1px solid #888888;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
box-shadow: inset 0 1px 0 0 #888888;
-webkit-box-shadow: 0 1px 0 0 #888888 inset;
-moz-box-shadow: 0 1px 0 0 #888888 inset;
-ms-box-shadow: 0 1px 0 0 #888888 inset;
-o-box-shadow: 0 1px 0 0 #888888 inset;
color: white;
font-weight: 400;
font-size: 105%;
padding: 6px 20px;
text-align: center;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #303030;
box-shadow: 0 0 5px 5px #888888 inset;
-webkit-box-shadow:0 0 5px 2px #888888 inset;
-moz-box-shadow: 0 0 5px 2px #888888 inset;
-ms-box-shadow: 0 0 5px 2px #888888 inset;
-o-box-shadow: 0 0 5px 2px #888888 inset;
}
/* End of Chef Registration Form */<nav class="clearfix">
<ul class="clearfix">
<li><a href=""><span style="color:white">Home</a>
</li>
<li><a href="#rates"><span style="color:white">Rates</a>
</li>
<li><a href="#pay"><span style="color:white">Pay</a>
</li>
<li><a href="#buy"><span style="color:white">Buyout</a>
</li>
<li><a href="#join"><span style="color:white">Join</a>
</li>
<li><a href="#contact"><span style="color:white">Contact</a>
</li>
</ul> \t <a href="#" id="pull"><span style="color:white">Menu</span></a>
</nav>
不好...不好。位置：絕對錶示當您在智能手機上向下滾動時，導航欄並未固定在屏幕的頂部。這是我想要的。 – MaxC