CSS position:sticky undone by <div container> (和其他)

问题描述 投票：0回答：1

首先我要说的是，我在这方面完全是个初学者。我正在建立一个关于我的研究的个人网站，有一天，当我有了自己的研究小组时，这个网站将扩展成一个团体网站。

我有一个菜单，我想在滚动时将它贴在页面的顶部，这很好用。然而，当菜单的底部到达< div...> 任何形式的地方时，它就决定不再粘住了--。但这只是Safari的问题 对于iOS系统，就我测试的情况来看（我家只有Mac和iPhone可以使用）。

请看：www.capgoodwin.comindex.html，了解这个操作。我已经将该页面设置为有一大堆的break < br > ，然后是一个< div class="container">< div > 是空的，然后是更多的break。在iOS Safari上一点击，导航栏就消失了。

我想相关的文件是 www.capgoodwin.comindex.html 和 www.capgoodwin.comstyle.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>: [email protected]<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>
ios css css-position
1个回答
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 for begginers了解更多信息

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.