Question

在将页眉滚动到顶部后，想要将页眉固定到页面顶部。尝试查看其他stackoverflow答案，但似乎无法让我的代码执行我想要的操作。

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
        </script>
    </head>
    <body>
        <div id = "header">
            <div id = "contents">
                <img src ="unnamed.jpg">
            </div>
        </div>
        <ul class ="nav">
            <li><a href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
        <div id = "page">
        </div>
    </body>
</html>

CSS

html, body, #header {
    width:100%;
    height:85%;
    margin:0;
    padding:0;
}

#header {
    z-index:-1;
    box-shadow:0px 1px 15px black;
}
#page {
    margin-top:-20px;
    background-color:white;
}
#header #contents {
    position:fixed;
    z-index:-1;
    left:50%;
    top:30%;
    transform: translate(-50%, -50%);
    text-align:center;
}
.nav {
    text-align:center;
    background-color: rgb(233,204,148);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align:center;
}
.nav li {
    display:inline;
}
.nav a {
    display: inline-block;
    color: white;
    padding: 30px 35px;
    text-decoration: none;
    margin-right:20px;
}

.nav li a:hover {
    background-color: white;
    color:rgb(233,204,148); 
}

Answer 1

    <div id = "header">
      <div id = "contents">
         <img src ="unnamed.jpg">
      </div>
   </div>
   <ul class ="nav" id="navBar">
     <li><a href="default.asp">Home</a></li>
     <li><a href="news.asp">News</a></li>
     <li><a href="contact.asp">Contact</a></li>
     <li><a href="about.asp">About</a></li>
   </ul>
   <div id = "page">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
   </div>


$(window).scroll(function function_name (argument) {
            if($(window).scrollTop() > 250){
               $(".nav").addClass('fixedClass')
            }
            else{
               $(".nav").removeClass('fixedClass')
            }
         })


html, body, #header {
    width:100%;
    height:85%;
    margin:0;
    padding:0;

}

#header {
    z-index:-1;
    box-shadow:0px 1px 15px black;

}
#page {
    margin-top:-20px;
    background-color:white;
}
#header #contents {

    left:50%;
    top:30%;
    transform: translate(-50%, -50%);
    text-align:center;
}
.nav {
    text-align:center;
    background-color: rgb(233,204,148);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align:center;
}
.nav li {
    display:inline;

}
.nav a {
    display: inline-block;
    color: white;
    padding: 30px 35px;
    text-decoration: none;
    margin-right:20px;
}
.fixedClass{
   position: fixed;
   top: 0;
}

您需要检查滚动位置，以便在有固定位置时通知标题。

Answer 2

使用以下代码在滚动浏览后修改标题：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .affix {
          top: 0;
          width: 100%;
      }

      .affix + .container-fluid {
          padding-top: 70px;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid" style="background-color:#F44336;color:#fff;height:500px;padding-left: 0px; padding-right: 0px;">
      <img src ="img/0.JPG" style="height: 500px;width: 100%;">
    </div>
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="500">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Basic Topnav</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </nav>
    <div class="container-fluid" style="height:1000px">
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </body>
</html>

Answer 3

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js"></script>

</head>
<body>
<div id = "header">
<div id = "contents">
<img src ="unnamed.jpg">
</div>
</div>
<ul class ="nav nav-relative">
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
<div id = "page">

</div>
<script>
$(document).ready(function(){
  $(window).scroll(function(){
    if(($('#header').is(':appeared'))){
      $('.nav').removeClass('nav-fixed').addClass('nav-relative')
    }
    else {
      $('.nav').removeClass('nav-relative').addClass('nav-fixed')
    }
})
})
</script>
</body>
</html>
</body>
  </html>

CSS

html, body, #header {
    width:100%;
    height:85%;
    margin:0;
    padding:0;

}

#header {
    z-index:-1;
    box-shadow:0px 1px 15px black;

}
#page {
    margin-top:-20px;
    background-color:white;
}
#header #contents {
    position:fixed;
    z-index:-1;
    left:50%;
    top:30%;
    transform: translate(-50%, -50%);
    text-align:center;
}
.nav {
    text-align:center;
    background-color: rgb(233,204,148);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align:center;
}
.nav-fixed {
  position: fixed;
    top:0px;
    width: 100%;
}
.fixedClass{
   position: fixed;
   top: 0;
}
.nav li {
    display:inline;

}
.nav a {
    display: inline-block;
    color: white;
    padding: 30px 35px;
    text-decoration: none;
    margin-right:20px;
}

.nav li a:hover {
    background-color: white;
    color:rgb(233,204,148);
}

滚动浏览后如何修复标题

3 个答案:

CSS