标题div在滚动时保持但向下移动，但保持在nabber菜单下

时间：2017-03-19 18:38:12

标签： javascript jquery html css twitter-bootstrap

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

我正在为我的一个朋友建立一个网页，但是我仍然坚持使用标题栏的部分，我要解决这个问题，但只是针对某个位置...

我的意思是看下面的...（小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>

TitleBar with List to scroll

＆＃13;
＆＃13; 
//
//
// ------- ------- ------- ------- 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));
        }
    });
}());
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 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>

相关问题
最新问题