CSS position:sticky 由 <div container> (和其他) 撤消

Question

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

我有一个菜单，当我滚动过去时，我想将它贴在页面顶部，这很好用。但是，一旦菜单底部到达任何类型的 ，它就会决定不再坚持 - 但这只是 Safari 中的一个问题 就我而言对于 iOS 而言'已经测试过了（我家只能使用 Mac 和 iPhone）。

请参阅：www.capgoodwin.com/index.html 以了解此操作。我已经将该页面设置为有一大堆休息时间
，然后是一个空的

，然后是更多休息时间。一旦你点击 iOS Safari，导航栏就会消失。

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

希望有人能帮忙，干杯。

/* 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";
    }
}

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 -----{}

<!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>

Answer 1

你总是可以像这样使用 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 for 初学者了解更多信息