javascript - 标题 div 在滚动时保持不变，但向上移动到下一个，但保持在 nabber 菜单下方

标签 javascript jquery html css twitter-bootstrap

这是我的第一个堆栈溢出问题。 我要疯了!所以我需要你的帮助..

我正在为我的一个 friend 构建一个网页，但我被标题栏的部分困住了，我需要修复什么，但只是为了某个位置......

我的意思是见下文...(小Photoshop)颜色标题栏...

我正在使用 Bootstrap 3，我希望标题栏停在距顶部 50 像素处，固定在顶部 50 像素处，并在到达下一个时移动到下一个... 我正在谷歌搜索我能找到的任何东西，但是顶部有太多修复(在顶部的 0 像素而不是 50 像素)，并且直到下一个标题栏...... 别担心我的 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>

TitleBar with List to scroll 

//
//
// ------- ------- ------- ------- 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>&nbsp; Diabète
	            </a>
	          </li>
	          <li>
	            <a href="#"> <em>VECA™</em>&nbsp; Hypertension cardiaque
	            </a>
	          </li>
	          <li>
	            <a href="#">
	              <em>VECA™</em>&nbsp; Rénal
	            </a>
	          </li>
	          <li role="separator" class="divider"></li>
	          <li class="disabled">
	            <a href="#"> <em>VECA™</em>&nbsp; Munitio</a>
	          </li>
	          <li class="disabled">
									<a href="#"> <em>VECA™
										</em>&nbsp; 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>&copy; 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>

最佳答案

期待我的评论有所 react ，如果您的浏览器运行它，这里有一个 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>

关于javascript - 标题 div 在滚动时保持不变，但向上移动到下一个，但保持在 nabber 菜单下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42890566/

上一篇：javascript - 如何通过相应的元素传递对象？

下一篇：javascript - HTML5 Canvas 图像上传 - 上传空白图像或被破坏

相关文章：

javascript - 对非常大的数进行模运算

javascript - 如何延迟 toggleClass 事件以防止垃圾邮件更改？

c# - Accordion : Arrow image not displaying even though image path is correct

php - 如何使用append方法在#posts div中显示属于点击类别的帖子？

html - Bootstrap 4 在小屏幕上的奇怪行为

html - 如何将 -moz-user-select 重置为可选？

javascript - Jquery append() 不适用于新的 <a>Add</a>

javascript - 使用 passport-saml 注销 Idp session

javascript - JSON jQuery 菜单问题

javascript - 如何使用 id 从 html 调用 javascript

©2024 IT工具网  联系我们