堆栈内存溢出
  繁体   English   中英

滚动过去后如何固定标题

[英]How to make a header fixed after scrolling past it

 原文  2017-02-13 06:37:02  3   3    javascript/ jquery/ html/ css

问题描述

想要在将标题滚动到页面顶部后使其固定在页面顶部。 尝试查看其他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); 
}

3 个解决方案

解决方案1
 0 已采纳  2017-02-13 07:00:11

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

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

解决方案2
 0  2017-02-13 07:25:15

使用以下代码在滚动过去后使标题固定： 

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

解决方案3
 0  2017-02-13 15:22:39

<!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);
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 滚动经过div后固定的固定菜单 滚动到标题后，将显示DIV导航 滚动浏览元素时更改固定标题的背景 滚动过去标题后，无法使我的导航栏（没有框架/库）停留 一些垂直滚动后如何有一个固定的标题？ 向下滚动页面后，固定标题跳 滚动浏览标题后显示图像 - 尝试不起作用？ 滚动锚点后如何添加课程？ 如何平滑地防止固定元素滚动到指定元素的上方 滚动后固定多个div位置
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM