CSS位置：由<div container =“”>（和其他人）

时间：2017-12-28 00:31:41

标签： ios css css-position

我首先要说的是我是一个完全的初学者。我正在建立一个关于我的研究的个人网站，无论如何，有一天我会有自己的研究小组扩展到一个小组网站。

我有一个菜单，我想在滚动过去时粘在页面顶部，这样可以正常工作。但是，只要菜单底部达到＆lt; DIV ...＆GT;在任何形式下，它决定不再坚持 - 但这只是Safari的中的一个问题，只要我测试了它（只能访问我家中的Mac和iPhone）

请参阅：www.capgoodwin.com/index.html以了解此情况。我已将该页面设置为有一大堆中断＆lt; br＆gt;，然后＆lt; div class =＆＃34; container＆＃34;＆gt;＆lt; / div＆gt;这是空的，然后是更多休息。一旦你点击iOS Safari，导航栏就会消失。

我猜相关文件是www.capgoodwin.com/index.html和www.capgoodwin.com/style.css，我喜欢粘贴代码的特定部分，但我不知道哪些位实际上是错误的，所以我把整个事情都放进去了。

我希望有人可以帮助，欢呼。

＆＃13;
＆＃13; 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("nav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
＆＃13; 
body {
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    text-align: justify;
    font-family:sans-serif;
} 



//--------------- font stuff -----{}
h1 {
    color: white;
    font-size: 2em;
    text-shadow: 2px 2px 4px #000000;
}
h6 {
    color: white;
    font-style: italic;

    text-shadow: 2px 2px 4px #000000;
    
}

p7 {
    width:10px;
}

p8 {
    color: black;
    font-size: 1.5em;
    font-family: Helvetica;
}

p9 {
    color: gray;
    font-size: 0.7em;
    font-family: Helvetica;
}

p10 {
    color: red;
    font-size: 1em;
}

p11 {
    color: blue;
    font-size: 1em;
}

p12 {
    color: orange;
    font-size: 1em;
}

p13 {
    color: green;
    font-size: 1em;
}

p14 {
    color: gray;
    font-size: 1em;
}
//--------------- font stuff -----{}

.jumbotron {
    padding: 0.5%;
    border-radius: 0px;
    margin: 0px;
    position: relative;
}

@media screen and (min-width: 661px) {
    .jumbotron .img {
        margin-bottom: 1px;
        opacity: 0.2;
        background: #000000 url("img/topbar2.jpg") center;
        width: 100%;
        height: 100%;
        background-size: cover;
        position: absolute;
        top:0;
        left:0;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-position: 0em -48em
    }
}

@media screen and (max-width: 660px) {
    .jumbotron .img {
        margin-bottom: 1px;
        opacity: 0.2;
        background: #000000 url("img/topbar2.jpg") center;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top:0;
        left:0;
        background-position: 0em -15em
    }
}


hr.style1 {
    border-color: white;
    margin: 0px;
    height: 0.1px;
}

hr.style2  {
    border-color: darkgrey;
    width: 75%;
}

//--------------- menu stuff -----{}
/* Add a black background color to the top navigation */
.topnav {
    background-color: #484747;
    display: inline-block;
    width: 100%;
    padding: 4px;
    font-size: 15px;
    text-align: center;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
    
}

/* Style the links inside the navigation bar */
.topnav a {
    display: inline-block;
    text-align: center;
    color: #f2f2f2;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    font-size: 15px;
    

}

/* Add an active class to highlight the current page */
.active {
    background-color: #b7b7b7;

}

.topnav a:hover {
    color: black;
    text-decoration-line: none;
}

.topnav a:hover:not(.active) {
    color: rgba(79, 160, 255, 0.9);
    text-decoration-line: none;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 660px) {
  .topnav a:not(.active) {display: none;}
  .topnav a.icon {
    position: absolute;
    right: 4px;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 660px) {
  .topnav.responsive {position: sticky;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 1%;
    top: 0.19em;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

//--------------- menu stuff -----{}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>CAP Goodwin</title>
    <link rel="icon" href="img/navlogo.JPG">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>    
<!top banner start---------------------->      
<div style="background-color: #484747" class="jumbotron text-center">
    <div class="img"></div>
    <h1>Conrad Goodwin</h1>
    <small><h6>Inorganic and Organometallic Chemistry</h6></small>
</div>
<!top banner end---------------------->  

<!menu bar start---------------------->      
<div class="topnav" id="nav">
  <a href="index.html" class="active">Home</a>
  <a href="research.html">Research Focus</a>
  <a href="pubs.html">Publications</a>
  <a href="crystallography.html">The Functional Crystallographer</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div> 
<!menu bar end---------------------->     





    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

   <div class="container"></div> 
        
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    


            
<!contact details---------------------->     
<div class="center-block">    
        <div class="text-center">
<hr class="style2">
            
            <p9>
            School of Chemistry, The University of Manchester,<br>
            Oxford Road, Manchester, M13 9PL, U.K.<br>
            <p10>Office</p10>: 5.63 | <p11>Lab</p11>: 5.52<br>
            <p12>e</p12>: conrad.goodwin@manchester.ac.uk<br>
            <p13>t</p13>: +44(0)7545885848<br>
            </p9>    
            <a href="https://twitter.com/ConradGoodwin?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @ConradGoodwin</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
</div>
    
</body>      
</html>
    
<!dependencies---------------------->      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>  
<script src="bootstrap/js/nav.js"></script>          
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您总是可以像这样使用webkit：

<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.example {
width: 100%;
height: 900px;
background-color: #ddd;
display: inline-block;
}

.headerExample {
width: 100%;
height: 100px;
background: linear-gradient(black, grey);
box-shadow: 10px 10px 5px grey;
</style>
<div class="sticky">
<div class="headerExample">
<p> Some Text...</p>
</div>
</div>
<div class="example">
<h1> Some more text </h1>
<p> Some more text </p>
</div>

瞧，顶部保持并保持住！

面向初学者的Google Webkit

相关问题
最新问题