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

【问题标题】：Title div that stays while scrolling but move up the next one, but stay below the nabber menu标题 div 在滚动时保持不变，但会向上移动下一个，但保持在 nabber 菜单下方
【发布时间】：2017-03-19 18:38:12
【问题描述】：

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

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

我的意思是见下文...（Little Photoshop）颜色标题栏...

我正在使用 Bootstrap 3，我希望标题栏从顶部停止 50px，固定在顶部 50px，并在到达时移动到下一个... 我在谷歌上搜索我能做的任何事情，但是顶部有太多的修复（顶部的 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>

【问题讨论】：

  • 看起来像 position:sticky ？但是 html 和屏幕截图并不能说明你正在发生的事情
  • 对不起，我是新手...请让我添加我的代码....一些方法！！！！
  • 好吧，我希望这会有所帮助...

标签： javascript jquery html css twitter-bootstrap


【解决方案1】：

期待我的评论有一些反应，如果您的浏览器运行它，这里有一个 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 代码添加到我的 js 文件中，没有任何效果了:-(。javascript 不是以“$”而不是“[”开头的吗？？？
  • @joelstonge 这是我演示中的 CSS，而不是 javascript。你做了什么？
  • Ohhhhh 打耳光.... LOL... 是的，非常完美.. 非常感谢。但我不知道这可以在 CSS 中完成，我正在使用 js 和 jquery 来处理 200 种不同的可能性，并且......谢谢那太棒了
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-04-11
  • 2012-03-29
  • 2021-07-29
  • 2012-06-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode