这是我的第一个堆栈溢出问题。 我疯了！所以我需要你的帮助......
我正在为我的一个朋友建立一个网页，但是我仍然坚持使用标题栏的部分，我要解决这个问题，但只是针对某个位置...
我的意思是看下面的...（小Photoshop）颜色标题栏......
我使用Bootstrap 3，我希望标题栏从顶部停止在50px，固定在顶部50px，当它到达时移动到下一个... 我尽可能地搜索任何内容，但有太多的东西在顶部修复（在顶部的0px而不是50px），并且直到下一个标题栏... 不要担心我的HTML或CSS ...这对我来说是100％好的...... 它在javascript和jQuery中我不太擅长，而且我知道这是一个jQuery插件或代码或其他东西...... 我在这里绝望，任何人都可以帮助我......
我有
<div>Hello world</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
//
//
// ------- ------- ------- ------- ToolTip
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
//
//
// ------- ------- ------- ------- titlebar
//???
//???
//???
//
//
// ------- ------- ------- ------- Carousel
$('#carousel-example-generic').carousel({
interval: 3000
});
(function() {
// setup your carousels as you normally would using JS
// or via data attributes according to the documentation
// http://getbootstrap.com/javascript/#carousel
$('#carousel123').carousel({
interval: 2000
});
}());
(function() {
$('.carousel-showmanymoveone .item').each(function() {
var itemToClone = $(this);
for (var i = 1; i < 4; i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-" + (i))
.appendTo($(this));
}
});
}());<!DOCTYPE html>
<!-- ======= ======= ======= ======= ======= ======= ======= html -->
<html lang="en">
<!-- ======= ======= ======= ======= ======= ======= ======= head -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aliments Cibles</title>
<link href="http://jsto.ca/test/_css/scripton.min.css" rel="stylesheet">
<style>
.nothing {
padding: 0;
margin: 0;
}
</style>
</head>
<!-- ======= ======= ======= ======= ======= ======= ======= /head -->
<!-- ======= ======= ======= ======= ======= ======= ======= body -->
<body>
<!-- ======= ======= ======= ======= ======= ======= ======= nav -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img alt="Brand" src="http://jsto.ca/test/_img/ac.png" height="27px"></span> Aliments Cibles
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">Accueil
<span class="sr-only">(current)</span>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Collection
<em>VECA™</em>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<em>VECA™</em> Diabète
</a>
</li>
<li>
<a href="#"> <em>VECA™</em> Hypertension cardiaque
</a>
</li>
<li>
<a href="#">
<em>VECA™</em> Rénal
</a>
</li>
<li role="separator" class="divider"></li>
<li class="disabled">
<a href="#"> <em>VECA™</em> Munitio</a>
</li>
<li class="disabled">
<a href="#"> <em>VECA™
</em> Performance</a>
</li>
</ul>
</li>
<li> <a href="#">Média</a> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Info
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li> <a href="#">À propos</a> </li>
<li> <a href="#">Qui sommes nous</a> </li>
<li>
<a href="#"> <em>VECA™</em> </a>
</li>
<!-- <li role="separator" class="divider"></li> -->
<li> <a href="#">Mission</a> </li>
</ul>
</li>
<li class="nothing">
<!-- <a href="#">EN</a> -->
<a href="#" class="nothing"> <img class="nothing" src="http://jsto.ca/test/_img/q.png" width="20" height="20" /> </a>
</li>
<li class="nothing">
<a href="#" class="nothing"> <img class="nothing" src="http://jsto.ca/test/_img/c.png" width="20" height="20" />
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ======= ======= ======= ======= ======= ======= ======= /nav -->
<!-- ======= ======= ======= ======= ======= ======= ======= breadcrumb -->
<ol class="breadcrumb">
<li><a href="#">Accueil</a></li>
<li><a href="#"><em>VECA™</em></a></li>
<li class="active">À quelque part dans le site</li>
</ol>
<!-- ======= ======= ======= ======= ======= ======= ======= /breadcrumb -->
<!-- ======= ======= ======= ======= ======= ======= ======= carousel-2 -->
<div class="container-fluid">
<div class="row">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"> <img src="http://jsto.ca/test/_img/carousel/carousel-01.png" class="img-responsive"> </a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"> <img src="http://jsto.ca/test/_img/carousel/carousel-02.png" class="img-responsive"> </a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"> <img src="http://jsto.ca/test/_img/carousel/carousel-03.png" class="img-responsive"> </a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"> <img src="http://jsto.ca/test/_img/carousel/carousel-04.png" class="img-responsive"> </a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"> <img src="http://jsto.ca/test/_img/carousel/carousel-05.png" class="img-responsive"> </a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"> <img src="http://jsto.ca/test/_img/carousel/carousel-06.png" class="img-responsive"> </a>
</div>
</div>
</div>
</div>
<!-- <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> -->
<!-- -->
</div>
</div>
<!-- ======= ======= ======= ======= ======= ======= ======= /carousel-2 -->
<!-- ======= ======= ======= ======= ======= ======= ======= carousel -->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="http://jsto.ca/test/_img/car-rata.png" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item"> <img src="http://jsto.ca/test/_img/car-carrot.png" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item"> <img src="http://jsto.ca/test/_img/car-salmon.png" alt="...">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
<!-- ======= ======= ======= ======= ======= ======= ======= /carousel -->
<!-- ======= ======= ======= ======= ======= ======= ======= main -->
<div class="container">
<h1>Hello, world!</h1> </div>
<div class="container-fluid titleBar-d" id="titlebar1">
<div class="container"> <img src="http://jsto.ca/test/_img/titleBar/titleBar1.png"> </div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> <img class="img-responsive" src="http://jsto.ca/test/_img/label/label1.png" /> </div>
<!-- ======= ======= ======= ======= ======= ======= ======= Table Valeur Nutritive -->
<!-- ======= ======= ======= ======= ======= ======= ======= /Table Valeur Nutritive -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> <img class="img-responsive" src="http://jsto.ca/test/_img/label/label2.png" /> </div>
<!-- ======= ======= ======= ======= ======= ======= ======= Table Valeur Nutritive -->
<!-- ======= ======= ======= ======= ======= ======= ======= /Table Valeur Nutritive -->
</div>
</div>
<div class="container-fluid titleBar-hc" id="titlebar2">
<div class="container"> <img src="http://jsto.ca/test/_img/titleBar/titleBar2.png"> </div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> <img class="img-responsive" src="http://jsto.ca/test/_img/label/label3.png" /> </div>
<!-- ======= ======= ======= ======= ======= ======= ======= Table Valeur Nutritive -->
<!-- ======= ======= ======= ======= ======= ======= ======= /Table Valeur Nutritive -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> <img class="img-responsive" src="http://jsto.ca/test/_img/label/label4.png" /> </div>
<!-- ======= ======= ======= ======= ======= ======= ======= Table Valeur Nutritive -->
<!-- ======= ======= ======= ======= ======= ======= ======= /Table Valeur Nutritive -->
</div>
</div>
<div class="container-fluid titleBar-k" id="titlebar3">
<div class="container"> <img src="http://jsto.ca/test/_img/titleBar/titleBar3.png"> </div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> <img class="img-responsive" src="http://jsto.ca/test/_img/label/label5.png" /> </div>
<!-- ======= ======= ======= ======= ======= ======= ======= Table Valeur Nutritive -->
<!-- ======= ======= ======= ======= ======= ======= ======= /Table Valeur Nutritive -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> <img class="img-responsive" src="http://jsto.ca/test/_img/label/label6.png" /> </div>
<!-- ======= ======= ======= ======= ======= ======= ======= Table Valeur Nutritive -->
<!-- ======= ======= ======= ======= ======= ======= ======= /Table Valeur Nutritive -->
</div>
</div>
<!-- ======= ======= ======= ======= ======= ======= ======= /main -->
<!-- ======= ======= ======= ======= ======= ======= ======= footer -->
<footer>
<div class="container">
<p>© 2017 | JStO | Scripton</p>
</div>
</footer>
<!-- ======= ======= ======= ======= ======= ======= ======= /footer -->
<script src="http://jsto.ca/test/_js/jquery.min.js"></script>
<script src="http://jsto.ca/test/_js/scripton.min.js"></script>
<!-- <script src="http://jsto.ca/test/_js/scripton.js"></script> -->
</body>
</html>
答案 0 :(得分：0)
期待我的评论有所反应，如果您的浏览器运行它，这里是position:sticky行为演示，否则，可以使用javascript polyfill。
这更像是猜测，因为没有您的演示或代码显示您拥有的内容以及您遇到的问题。
[id^=titlebar] {
counter-increment:title ;
background:green;
position:sticky;
top:1em;/* a bottom value cann be used too */
}
/* demo purpose to check wich titles stands there */
body {counter-reset:title }
[id^=titlebar]:before {
content:counter(title)' ';
color:yellow
}<div>Hello world</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar1">Title 1</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar2">Title 2</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div id="titlebar3">Title 3</div>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>