我试图使用基本的HTML，CSS和Javascript来制作标题，＆＃34;类别＆＃34;滚动时像粘贴标题一样固定在顶部，但我的工作并不起作用。我已经研究过它是如何完成的，但我似乎无法将其应用到我的工作中。我是新手，还在学习如何编码。感谢非常感谢帮助。
这是代码。
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 100) {
wrap.addClass("fix-category");
} else {
wrap.removeClass("fix-category");
}
}); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../../css/register-dev.css">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div role="main" ng-controller="cartController" ng-init="init()">
<div class="wrap" id="wrap">
<header>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #ffffff;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img class="cursor-pointer hidelogo" src="" width="50" height="60" id="rsvp_logo" alt="Logo">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe" aria-hidden="true"></i>
<span id="selected" class="caret">Language </span></a>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">English</a>
<a class="dropdown-item" href="#">中文</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
<span id="sort" class="caret">Sort</span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" ng-model="selectedOrder">
<a class="dropdown-item" href="#">Category</a>
<a class="dropdown-item" href="#">Date and Time</a>
<a class="dropdown-item" href="#">Availability</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-filter" aria-hidden="true"></i>
Topics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="print.html"><i class="fa fa-print" aria-hidden="true"></i> Print</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i>
Cart</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="jumbotron blue">
<div class="row">
<div class="col white" >
Activity
</div>
<div class="col white">
<i class="fa fa-calendar-o" aria-hidden="true"></i>
Date
</div>
<div class="col white">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Venue
</div>
</div>
</div>
</div>
<div class="category">
<b>Category 1</b>
</div>
<div class="container">
<div class="row">
<div class="col">
National Senior Volunteer Month Opening Ceremony
</div>
<div class="col">
30 December 2017<br>
</div>
<div class="col">
9.00am - 12.00pm
</div>
<div class="col">
Auditorium
</div>
<div class="col">
<!-- <td ng-class="getTableColourBySection(colourIndex, 'defaultCellClass')">
<input ng-if='(session.session_id != null && session.roles[0].attendee_count < session.roles[0].count) || checkboxSessions[session.session_id] == true' ng-model="checkboxSessions[session.session_id]" ng-change="checkSelectedSession(session, checkboxSessions[session.session_id])" type="checkbox">
<span ng-if="session.session_id == null">No Session </span>
<span ng-if="session.attendance_count >= session.activity.target_number">Session full</span>
<span ng-if="session.roles[0].attendee_count >= session.roles[0].count">Full Session </span>
</td> -->
<b>18 available</b>
</div>
<div class="col">
<button type="button" class="btn btn-primary btn-lg" id="btnAdd" ng-submit="add()">
<span><i class="fa fa-plus" aria-hidden="true"></i> <b>ADD</b></span>
</button>
</div>
<div class="col">
<button class="btn btn-light btn-lg" type="button" data-toggle="collapse" data-target="#demo">Detail
<span><i id="toggle-demo" class="fa fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
</div>
</div>
<div id="demo" class="col collapse in">
</div>
<div class="category">
<b>Enrichment and Learning</b>
</div>
</body>
</html>
<style>
.category
{
width: 100%;
height: 40px;
background : #EEEEEE;
padding: 5px;
}
.header
{
height: 100px;
}
.wrap
{
overflow: auto;
position: relative;
}
.fix-category .category
{
position:fixed;
height: 40px;
left: 0;
font-family: 'Lato', sans-serif;
}
</style>
答案 0 :(得分：0)
nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #ffffff;"
此。更改此选项并添加粘性顶部，以便在向下滚动时使其粘到顶部
nav class="navbar navbar-toggleable-md sticky-top navbar-light bg-faded fixed-top
答案 1 :(得分：0)
这解决了它。在CSS中使用top prop定位固定类别，如果使用jQuery，则可以使用$(window).scrollTop() > XX
var wrap = $("#wrap");
$(window).on("scroll", function(e) {
if ( $(window).scrollTop() > 100) {
wrap.addClass("fix-category");
} else {
wrap.removeClass("fix-category");
}
});.category
{
width: 100%;
height: 40px;
background : #EEEEEE;
padding: 5px;
}
.header
{
height: 100px;
}
.wrap
{
overflow: auto;
position: relative;
}
.fix-category .category
{
position:fixed;
height: 40px;
left: 0;
top: 55px;
font-family: 'Lato', sans-serif;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../../css/register-dev.css">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div role="main" ng-controller="cartController" ng-init="init()">
<div class="wrap" id="wrap">
<header>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #ffffff;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img class="cursor-pointer hidelogo" src="" width="50" height="60" id="rsvp_logo" alt="Logo">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe" aria-hidden="true"></i>
<span id="selected" class="caret">Language </span></a>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">English</a>
<a class="dropdown-item" href="#">中文</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
<span id="sort" class="caret">Sort</span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" ng-model="selectedOrder">
<a class="dropdown-item" href="#">Category</a>
<a class="dropdown-item" href="#">Date and Time</a>
<a class="dropdown-item" href="#">Availability</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-filter" aria-hidden="true"></i>
Topics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="print.html"><i class="fa fa-print" aria-hidden="true"></i> Print</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i>
Cart</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="jumbotron blue">
<div class="row">
<div class="col white" >
Activity
</div>
<div class="col white">
<i class="fa fa-calendar-o" aria-hidden="true"></i>
Date
</div>
<div class="col white">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Venue
</div>
</div>
</div>
</div>
<div class="category">
<b>Category 1</b>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>