@font-face {
font-family: "Segoe UI", Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
* {box-sizing: border-box;}
[class*="col-"] {
float: left;
padding: 15px;
}
h2 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
color: #0055cc;
margin: 0 0 10px;
text-shadow:0 2px 2px rgba(0,0,0,.7);
font-variant: small-caps;
text-align: center;
}
p {text-align:justify;}
a {text-decoration: none;}
body {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
background: #8080ff url("../imgs/body.jpg") no-repeat fixed center;
background-size: cover;
margin:0;
padding:0;
text-align:justify;
}
.shadow {box-shadow: 10px 10px 5px #888888;}
.border {
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.navbar {
width: 100%;
height: 50px;
background-color: #8080FF;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 1000;
}
.sidenav {
height:100%;
top: 50px;
width: 16.66%;
float: left;
background-color: #000099;
position:sticky!important;
z-index:999;
overflow:auto
}
.cont2 {
height:100%;
top: 50px;
width: 83.33%;
background: #fff url("../imgs/bg-white.png") no-repeat center fixed;
background-size: 100% 100%;
position:sticky!important;
z-index:100;
overflow:auto
}
#logo {width: 100%;}
#logo img {
display: block;
margin: auto;
width: auto;
}
/* For mobile phones: */
[class*="col-"] {width: 100%;}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.4/stickyfill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Gulf Coast Broadband - Wireless Internet for South Louisiana</title>
<meta charset="UTF-8">
<meta name="description" content="Gulf Coast Broadband">
<meta name="keywords" content="Louisiana,Wireless,Internet,Gulf,Coast,Broadband">
<meta name="author" content="Christopher Waguespack">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/content.css">
<script>
$(function(){
$('.navbar').Stickyfill();
$('.sidenav').Stickyfill();
});
</script>
</head>
<body>
<div id="logo">
<img src="imgs/gcb-new.png">
</div>
<div class="navbar">
<h2>☸</h2>
</div>
<div class="sidenav col-3">
<ul>
<li>☈</li>
</ul>
</div>
<div class="cont2 col-9">
<center><h2>Welcome to Gulf Coast Broadband!</h2></center>
<p>Since 2007, Gulf Coast Broadband has been proudly providing quality wireless internet service to the Bayou Region. From Four-Mile Bayou to the port of West St. Mary, we have offered service to areas that would otherwise be unable to connect to the internet at an affordable price, or at all.</p>
<p>These days, internet access has become an important part of most people's daily lives. Whether conducting business via email or video, or just simply enjoying quality family time watching movies with the family on Netflix, almost everyone needs access. Even more notable, applications such as Netflix (media streaming), video chat, and a growing number of online video game require High-Speed Internet access - slower DSL and costly cable just won't do!</p>
<p>Wireless technology allows us so many options for staying connected to others, whether they are friends and family or business associates. However, to be able to use these incredible communication tools YOU HAVE TO BE CONNECTED to the outside world.</p>
<p>High Speed Broadband Internet is a Must!</p>
<p>You can Facebook from your iPad, watch movies from Netflix, read a book on your Kindle, order products from your vendors. The World Wide Web is a virtual encyclopedia of solutions for almost all of your wants, needs or desires.</p>
<p>Gulf Coast Broadband also provides wireless internet telephone services (Voice over IP - VoIP). This allows for far cheaper service rates with the quality of digital telephone services just like cell phones use today.</p>
<p>Since 2007, Gulf Coast Broadband has been proudly providing quality wireless internet service to the Bayou Region. From Four-Mile Bayou to the Port of West St. Mary, we have offered service to areas that would otherwise be unable to connect to the internet at an affordable price, or at all.</p>
<p>These days, internet access has become an important part of most people's daily lives. Whether conducting business via email or video, or just simply enjoying quality family time watching movies with the family on Netflix, almost everyone needs access. Even more notable, applications such as Netflix (media streaming), video chat, and a growing number of online video game require High-Speed Internet access - slower DSL and costly cable just won't do!</p>
<p>Wireless technology allows us so many options for staying connected to others, whether they are friends and family or business associates. However, to be able to use these incredible communication tools YOU HAVE TO BE CONNECTED to the outside world.</p>
<p>High Speed Broadband Internet is a Must!</p>
<p>You can Facebook from your iPad, watch movies from Netflix, read a book on your Kindle, order products from your vendors. The World Wide Web is a virtual encyclopedia of solutions for almost all of your wants, needs or desires.</p>
<p>Gulf Coast Broadband also provides wireless internet telephone services (Voice over IP - VoIP). This allows for far cheaper service rates with the quality of digital telephone services just like cell phones use today.</p>
</div>
</body>
</html>
我已经看到无数人有同样的问题，并且通过许多可能的解决方案，我无法弄清楚发生了什么。
我花了几个多小时尝试了这么多变化，每一件事都打破了我工作的小代码。
将媒体查询的类添加到我需要影响的元素中也会破坏我的Sticky导航。有人可以找到任何不正确的东西吗？
答案 0 :(得分：0)
找到答案。虽然有些代码 我用过来自w3schools，就是这样 显然对JS不太友好 和浮动我正在使用div。
卸下：
[class*="col-"] {
float: left;
padding: 15px;
}
和此：
[class*="col-"] {
width: 100%;
}
一旦这两个剪辑消失了，@ media 查询开始响应，JS 粘性的div不再被打破。如果有人 知道为什么这两个类调用会 打破一切，我当然喜欢 开明！ :)